使用 ng-model 将复选框输出绑定到对象的属性时出现异常行为答案

【问题标题】：unsual behavior when binding checkbox output to an object's property using ng-model使用 ng-model 将复选框输出绑定到对象的属性时出现异常行为
【发布时间】：2015-01-04 02:54:28
【问题描述】：

我无法理解以下行为：

这是我的角度代码：

(function(){
'use strict';
angular.module('myMod',[ ])
    .controller('abc',function($scope) {
        $scope.products = products;

        $scope.printProducts = function(){
            for(var index in $scope.products){
              console.log($scope.products[index].key + " " + $scope.products[index].check);
            }
        };

    });

   var products = [{key:'HERO',check:0}, {key:'MARUTI',check:0}, {key:'TATA',check:0}]; 
   }());

这是我的 HTML：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test</title>
</head>
<body ng-app="myMod">
    <div ng-controller="abc">
       <div ng-repeat="product in products">
        <label><input type="checkbox" ng-true-value='1' ng-false-value='0' ng-model='product.check' ng-click="printProducts()">{{product.key}}{{product.check}}</label>
      </div>
    </div>  
<!-- scripts section -->
<script type="text/javascript" src = "angular.js"></script>
<script type="text/javascript" src= "basic.js"></script>
</body>
</html>

所以在这里我试图将对象“检查”的属性绑定到我的复选框的输出，选中时返回 1，未选中时返回值 0。但是，当我打印属性时在 for 循环内的控制台中，我遇到了意外的行为。

例如：当我选择“HERO”时，我得到了这个输出： HERO 0 --> 这里应该是 1 玛鲁蒂 0 塔塔 0

现在，当我选择 Maruti 时，我得到了：英雄 1 MARUTI 0 --> 这里应该是 1 塔塔 0

谁能解释一下这里发生了什么？链接到小提琴（以为你看不到控制台输出）http://jsfiddle.net/k2wfyj6e/

【问题讨论】：

你的小提琴目前是空的。此外，您的 ng-click 与您的复选框值更改属于同一摘要周期的一部分，并且在周期中排队太早而无法识别更改。使用 ng-change 而不是 ng-click
是的，你是对的。

标签： javascript html angularjs angularjs-scope angularjs-ng-model

【解决方案1】：

您需要使用ng-change 而不是ng-click。 ng-click（基本上是下面的点击事件）发生得太早，change 事件仅在此之后触发。 Angular 监听 change 事件来更新模型值。所以收听ng-click 还为时过早，因为 Angular 还没有处理和设置模型。

所以试试：-

   <input type="checkbox" ng-true-value='1' ng-false-value='0' 
          ng-model='product.check' ng-change="printProducts()">
         {{product.key}}{{product.check}}</label>

Demo

【讨论】：

哦，我从来不知道这种行为，非常感谢，这就像一个魅力