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

Question

我无法理解以下行为：

这是我的 angular 代码：

(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>

So here I am trying to bind to a property of an object 'check' in this case to the output of my checkbox which when selected returns 1 and when unselected gives a value of 0.但是，当我在 for 循环内的控制台中打印属性时，出现了意外行为。

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

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

谁能解释一下这是怎么回事？ Link 摆弄（以为你看不到控制台输出）http://jsfiddle.net/k2wfyj6e/

Answer 1

您需要使用 ng-change 而不是 ng-click。 ng-click（基本上是下面的点击事件）发生得太早，change 事件仅在此之后触发。 Angular 侦听更改事件以更新模型值。所以听 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

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

unsual behavior when binding checkbox output to an object's property using ng-model

html

javascript

angularjs

angularjs-scope

angularjs-ng-model