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

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

转载作者：行者123 更新时间：2023-12-03 11:08:00

我无法理解以下行为:

这是我的 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>

所以在这里，我尝试将对象“check”的属性绑定(bind)到我的复选框的输出，在这种情况下，该复选框在选中时返回 1，未选中时给出值 0。但是，当我打印该属性时在 for 循环内的控制台中，我遇到了意外的行为。

例如:当我选择“HERO”时，我得到以下输出:HERO 0 --> 这里应该是 1马鲁蒂 0塔塔0

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

谁能解释一下这里发生了什么吗？链接到 fiddle (以为你看不到控制台输出)http://jsfiddle.net/k2wfyj6e/

最佳答案

您需要使用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

关于javascript - 使用 ng-model 将复选框输出绑定(bind)到对象的属性时出现异常行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27750503/