Question

我想通过纯粹的AngularJS实现一个简单的GUI - 这里有两个（或更多）组复选框：http://jsbin.com/cemitubo/2/edit

以下是以下链接中的代码：

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
<div ng-app="myApp" ng-controller="MyController">
  <div class="group">
    <input type="checkbox" ng-model="tag.aaa"/>
    <input type="checkbox" ng-model="tag.ccc"/>
  </div>
  <div class="group">
    <input type="checkbox" ng-model="tag.zzz"/>
  </div>
  {{tag}}
</div>

JS：

angular.module('myApp', [])
.controller('MyController', function($scope){
  $scope.tag = {aaa: true};
});

检查其中一个组的复选框后，应取消选中其他组的所有复选框（显然该更改应反映在模型中）。

我尝试$watch tag模型变量，并将{false}设置为$watch回调中其他组的变量。问题是，每次$watch回调更改tag时，它都会触发$watch回调。

适当的AngularJS解决方案是什么？

提前致谢！

Answer 1

使用ng-change代替$watch：

类似的东西：

  $scope.changed = function(item, type){
    console.log(item);

    if((type == 'aaa' || type == 'ccc') ){
      $scope.tag.zzz = !item;
    }
    else  if(type == 'zzz'){
      $scope.tag.aaa = !item;
      $scope.tag.ccc = !item;
    }        
  }

HTML 的

 <div class="group">
    <input type="checkbox" ng-model="tag.aaa" ng-change="changed(tag.aaa,'aaa')"/>
    <input type="checkbox" ng-model="tag.ccc" ng-change="changed(tag.ccc,'ccc')"/>
  </div>
  <div class="group">
    <input type="checkbox" ng-model="tag.zzz"  ng-change="changed(tag.zzz, 'zzz')"/>
  </div>

演示 JSBIN

模型变量的相互影响

1 个答案: