Question

在这里，我使用$ watch来显示计数器值。

但计数器价值尚未增加，

要数，

$scope.$watch('items', function(items){
var selectedItems = 0;
angular.forEach(items, function(item){
selectedItems += item.selected ? 1 : 0;
})
$scope.selectedItems = selectedItems;
}, true);

在UI中，

<div class="col-sm-4" ng-repeat="item in items">
<label class="chkbox-holder cbox mbot10" for="List-{{$index}}"><input ng-model="item.Selected" type="checkbox" id="List-{{$index}}"><label for="List-{{$index}}"></label>{{item.name}}</label>
</div>

要显示计数器值，

<div>Selected Items Length: {{selectedItems}}</div>

但计数器仍为0;

来自http服务的JSON值是，

[
  {
    "id": 1,
    "refCode": "",
    "name": "pragadees"
  },
  {
    "id": 2,
    "refCode": "",
    "name": "pragadees"
  }......]

任何人都可以帮忙解决这个问题。

Answer 1

您刚刚收到错字错误。当您的JavaScript检查item.Selected时，您的标记绑定到item.selected。正确地重命名它们可以解决您的问题。我建议在ot html中使用低位键。

<input ng-model="item.selected" type="checkbox" id="List-{{$index}}">
                      ^-- See here

Demo

Answer 2

首先，你的ng模型中有一个拼写错误，item.selected而不是item.Selected可能是为什么它不匹配...

这就是我写它的方式，使用基本的角度双向数据绑定，没有额外的计数器，手表，触发器...... ....

＆＃13;

angular.module('myApp', []);

angular.module('myApp').controller('Ctrl', ['$scope', function($scope) {

    $scope.items = [{
      name: "Doe"
    }, {
      name: "Adam"
    }, {
      name: "Ado"
    }, {
      name: "Brown"
    }, {
      name: "Heather"
    }, {
      name: "Stan"
    }];
    
    $scope.itemsSelected = function() {
      return $scope.items.filter(function(i) {
        return i.selected
      }).length;
    }

  }

]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="Ctrl">
  <h2>current active selected options {{ itemsSelected() }}</h2>

  <ul>
    <div ng-repeat="item in items">
      <label for="List-{{$index}}">
        <input ng-model="item.selected" type="checkbox" id="List-{{$index}}">
        <label for="List-{{$index}}"></label>{{item.name}}</label>
    </div>
  </ul>
</body>

＆＃13;

Answer 3

您可以改为使用ng-change：

＆＃13;

var app = angular.module("app", []);
app.controller("myCtrl", function($scope) {
 
$scope.items = [
  {name: 'A', value: 'a'},
  {name: 'B', value: 'b'},
  {name: 'C', value: 'c'},
  {name: 'D', value: 'd'},
  {name: 'E', value: 'e'}
];
$scope.counter = 0;
$scope.change = function(e) {
  if(e){
    $scope.counter +=1;
  }else{
    if($scope.counter > 0) $scope.counter -=1;
  }
};

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  
<div class="col-sm-4" ng-repeat="item in items">
<label class="chkbox-holder cbox mbot10" for="List-{{$index}}">
  <input ng-model="item.Selected" type="checkbox" id="List-{{$index}}" 
         ng-change="change(item.Selected)">
  <label for="List-{{$index}}"></label>{{item.name}}</label>
</div>
  Counter: {{counter}}
</div>

＆＃13;

如何计算使用angular检查的复选框？

3 个答案: