Question

我无法理解以下行为：

这是我的角度代码：

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

所以在这里我试图绑定到对象'check'的属性，在这种情况下是我的复选框的输出，当选择返回1时，取消选择时给出值0.但是，当我打印属性时在for循环中的控制台中，我得到了意想不到的行为。

例如：当我选择“HERO”时，我得到了这个输出： HERO 0 - ＆gt;这里应该是1 MARUTI 0 TATA 0

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

任何人都可以解释一下这里发生的事情吗？链接到小提琴（认为你看不到控制台输出）http://jsfiddle.net/k2wfyj6e/

Answer 1

您需要使用ng-change代替ng-click。 ng-click（基本上是下面的点击事件）过早发生，change事件仅在此之后触发。 Angular侦听change事件以更新模型值。因此，收听ng-click会过早，因为角度尚未处理并设置模型。

所以试试： -

   <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将复选框输出绑定到对象的属性时出现异常行为

1 个答案: