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

Question

我有以下代码。

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。

Answer 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>
...

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

How to set checkbox should be selected based on conditions using angualrjs?

javascript

html

angularjs

checkbox

angularjs-directive