[英]how to count the checkbox which was checked using angular?
在這里，我使用$ watch顯示計數器值。
但是計數器值還沒有增加，
算一下
$scope.$watch('items', function(items){
var selectedItems = 0;
angular.forEach(items, function(item){
selectedItems += item.selected ? 1 : 0;
})
$scope.selectedItems = selectedItems;
}, true);
在用戶界面中，
<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"
}......]
任何人都可以幫忙。
您剛遇到錯字錯誤。 您的標記綁定到item.Selected而JavaScript正在檢查item.selected 。 重命名它們可以解決您的問題。 我建議在ot html內使用小寫鍵。
<input ng-model="item.selected" type="checkbox" id="List-{{$index}}">
^-- See here
首先，您的ng模型中有一個錯字，是item.selected不是item.Selected這就是為什么它不匹配的原因...
這就是我將如何使用基本角度雙向數據綁定，沒有額外的計數器，手表，觸發器等來編寫它。
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; } } ]);
<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>
您可以改用ng-change ：
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; } }; });
<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>
如何檢查選中的復選框，並使用Angular將數據保存到數據庫中
[英]How to check which checkbox is checked and save the data into database using Angular
取消選中一個復選框，該復選框在 Angular 5 中的條件下被選中並凍結
[英]uncheck a checkbox which is checked and freezed with a condition in Angular 5
如何使用Angular 5驗證我的帶復選框列表是否全部選中
[英]How to verify if my list with checkbox are all checked using Angular 5
如何計算在下一個td文本框中動態創建td具有相同值的復選框的計數？
[英]How to get count of checkbox checked which has same value in next td textbox dynamically created td?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.