取消选中angularjs复选框

Question

我有一个模型，可以呈现一个复选框列表。当我选中一个方框时，我希望其他任何复选框都不会被选中。下面的代码似乎迭代很好，但html没有反映出这些变化。我错过了什么？

HTML：

<tr ng-repeat="x in commonOrders">
                            <td>{{x.ProductName}}</td>
                            <td>{{x.ProductItemCode}}</td>
                            <td>{{x.ProductSize}}</td>
                            <td><input type="checkbox" 
                                       ng-click="updateCommonProduct(x)" 
                                       ng-checked="x.IsChecked"/></td>
                        </tr>

角/ JavaScript的：

$scope.updateCommonProduct = function(product) {

    // uncheck non-selected common orders
    angular.forEach($scope.commonOrders, function(value, key) {
        if (value.ProductItemCode !== product.ProductItemCode) {
            value.IsChecked = false;
        }
    }, $scope.commonOrders);



};

Answer 1

您应该使用ngModel＆amp; ngChange

• ngModel在模型和DOM之间创建双向绑定。
• ngChange会在模型发生变化时触发事件。

---

这是一个掠夺者：http://plnkr.co/edit/lrQnA6JrvlsirqK8QGaE?p=preview

<强>模板：

<tr ng-repeat="x in commonOrders">
   <td>{{x.ProductName}}</td>
   <td>{{x.ProductItemCode}}</td>
   <td>{{x.ProductSize}}</td>
   <td>
     <input type="checkbox" ng-change="check(x)" ng-model="x.isChecked"/>
   </td>
 </tr>

控制器方法：

$scope.check = function(current) {
  angular.forEach($scope.commonOrders, function(product) {
    if(product !== current) {
      product.isChecked = false;  
    }
  });
};