如何使用angularjs根据条件选择复选框？答案

【问题标题】：How to set checkbox should be selected based on conditions using angualrjs?如何使用angularjs根据条件选择复选框？
【发布时间】：2020-09-25 03:05:46
【问题描述】：

我有以下代码。

html：

<body ng-controller="MainCtrl">
   <div ng-if="isOwner">
      <input type="checkbox" ng-model="checkboxClicked"  
         />
   </div>
        <span ng-show="checkboxClicked">Non Editable</span> 
        <span ng-hide="checkboxClicked">Editable</span>  
  </body>

js:

app.controller('MainCtrl', function($scope) {
  $scope.isOwner="true";
  $scope.checkboxClicked="true";
});

如果Owner 和checkboxClicked 的值为true，则在执行时应始终默认选择checkbox，即使用不可编辑。喜欢：

即使我们也刷新浏览器，它也应该默认执行与上述相同的输出（这里还有Owner 和checkboxClicked 的值是true）。
作为所有者，我们也可以uncheck 这个checkbox，所以输出应该是Editable checkbox，即：可编辑。

请在这种情况下帮助我按照上面的屏幕截图和条件获得我想要的输出，我已经尝试过使用该代码，但它给出了带有不可编辑文本的空复选框，因为我相信我没有编写条件.

创建Plnkr。

【问题讨论】：

标签： javascript html angularjs checkbox angularjs-directive

【解决方案1】：

当您将变量直接绑定到 $scope 时，AngularJS 会出现一些问题： https://groups.google.com/forum/#!topic/angular/7Nd_me5YrHU

要解决此问题，您必须创建一个附加对象，该对象将数据包装在模板中可用的 $scope 中：

app.controller('MainCtrl', function($scope) {
  $scope.data = {
    isOwner: false,
    checkboxClicked: false
  };
});

并相应地更改模板：

<div ng-if="data.isOwner">
  <input 
    type="checkbox"
    ng-model="data.checkboxClicked"/>
</div>
...

【讨论】：

@mark，谢谢你的回复，但如果我喜欢你的代码，我总是只得到可编辑的文本，我没有得到我想要的输出。你能告诉我一次吗？
@mark，我已经编辑了您的帖子，在 js 中使用 true 而不是 false 进行了编辑，然后按照我的期望和您对 angualrjs 中 $scope 问题的解释，它可以正常工作。非常感谢您的帮助:-)