[英]select all checkboxes in angularJS
我是新的AngularJS。 我正在嘗試選擇帶有單個復選框的所有復選框,並執行checkboxClick
方法。 因為我們將值設置為范圍。 怎么做?
<input class="check-box" data-val="true" type="checkbox">Select All </input>
<table class="table table-bordered">
<tr>
<th></th>
<th>Printed</th>
<th>First Name</th>
<th>Last Name</th>
<th>Company</th>
<th>City</th>
<th>Country</th>
</tr>
<tr ng-repeat="item in items">
<td>
<input class="check-box" data-val="true" type="checkbox" ng-model="item.selected" ng-click="checkboxClick($event, item)">
</td>
<td>
{{item.printed}}
</td>
....
....
</tr>
</table>
JS
$scope.checkboxClick = function (eventobj, item) {
if (eventobj.target.checked) {
$scope.selectedItems.push(item);
$scope.getLabel(item.id);
$scope.getOrderItems(item.id);
$scope.getPaymentItems(item.id);
} else {
$scope.removeItemFromSelection(item);
};
};
您需要使用復選框上的ng-click事件啟動的功能。 這也將取消選中所有復選框。 它遍歷所有項目,更改每個項目的狀態。
<input type="checkbox" ng-model="selectAll" ng-click="checkAll()" />
<tr ng-repeat="item in items">
<td>
{{item.name}}
</td>
<td>
<input type="checkbox" ng-model="item.Selected" />
</td>
</tr>
控制器可能看起來像這樣:
angular.module("myApp", [])
.controller("checkboxCtrl", function($scope) {
$scope.Items = [{
name: "one"
}, {
name: "two"
}, {
name: "three"
}];
$scope.checkAll = function () {
angular.forEach($scope.Items, function (item) {
item.Selected = $scope.selectAll;
});
};
});
您可以使用HTML中的一個簡單變量來完成此操作:
<input class="check-box" data-val="true" type="checkbox" ng-model="item.selected" ng-click="checkboxClick($event, item)" ng-selected="checkAll">
<button ng-click="toggleAllCheckboxes()">Check/Uncheck All</button>
並在您的控制器中:
$scope.checkAll = false;
$scope.toggleAllCheckboxes = function(){
$scope.checkAll = !$scope.checkAll;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.