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

问题描述 投票：0回答：1

我有以下代码。

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";
});
  1. 如果Owner和checkboxClicked的值为true，则默认情况下应始终在执行时选择checkbox，即使用“不可编辑”。像：

enter image description here

  1. 即使我们也刷新浏览器（默认情况下，如果Owner和checkboxClicked的值为true，它也会在默认情况下执行相同的输出）。

  2. 作为所有者，我们也可以uncheck此checkbox，因此输出应使用Editable checkbox，即，例如：可编辑。

enter image description here

[在此情况下，请帮助我，根据上面的屏幕快照和条件，获得所需的输出，我已经尝试过使用该代码，但是由于带有不可编辑文本的空复选框，它给出了，因为我认为我无法编写条件。

创建Plnkr。

javascript html angularjs checkbox angularjs-directive
1个回答
0
投票

将变量直接绑定到$ 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>
...
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.