如果我选中所有复选框，则应自动选中“全选”复选框，反之亦然
[英]If I check all checkboxes the select all checkbox should automatically checked and vice-versa in AngularJS
问题描述
If I checked the check all checkbox at top then all checkbox are getting checked. 
如果我在顶部选中了“全部选中”复选框，则所有复选框都将被选中。 But problem comes when i check every checkbox individually the select all checkbox should be automatically be checked and vice-versa. 但是问题出在我单独检查每个复选框时，应该自动选中“全选”复选框，反之亦然。 Here is the code : 这是代码：
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<p>Click the table headers to change the sorting order:</p>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>
<button type="button" ng-click="remove($index)">Delete Selected</button>
</p>
<table border="1" width="100%">
<tr>
<th>
<input type="checkbox" ng-model="selectAll" ng-click="checkAll()" />
</th>
<th></th>
<th>Sl no</th>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
<th>Delete</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy">
<td>
<input type="checkbox" ng-model="x.select" ng-click="xsetting(x)" />
</td>
<td>{{x.select}}</td>
<td>{{$index+1}}</td>
<td>{{x.name}}</td>
<td>{{x.country}}</td>
<td>
<button type="button" ng-click="Delete(x)">Delete</button>
</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', ['$scope', 'filterFilter', function($scope, filterFilter) {
$scope.names = [{
name: 'Jani',
country: 'Norway'
}, {
name: 'Carl',
country: 'Sweden'
}, {
name: 'Margareth',
country: 'England'
}, {
name: 'Hege',
country: 'Norway'
}, {
name: 'Joe',
country: 'Denmark'
}, {
name: 'Gustav',
country: 'Sweden'
}, {
name: 'Birgit',
country: 'Denmark'
}, {
name: 'Mary',
country: 'England'
}, {
name: 'Kai',
country: 'Norway'
}];
//for sorting the rows
$scope.orderByMe = function(x) {
$scope.myOrderBy = x;
}
//single row deletion
$scope.Delete = function(x) {
$scope.names.splice($scope.names.indexOf(x), 1);
};
//selecting all checkboxes in the table
$scope.checkAll = function() {
angular.forEach($scope.names, function(x) {
x.select = $scope.selectAll;
});
};
//for selecting and deleting checked items
$scope.remove = function() {
$scope.names = filterFilter($scope.names, function(x) {
return !x.select;
});
};
}]);
</script>
</body>
</html>
here is the link to plunker http://plnkr.co/edit/LFShX3PTEITLaN7fSElX?p=preview 这是通向朋克的链接http://plnkr.co/edit/LFShX3PTEITLaN7fSElX?p=preview
Can anyone help please? 有人可以帮忙吗？
2 个解决方案
解决方案1
1 2017-05-04 11:17:57
You can have a ng-checked on your select All checkbox, like: 您可以在选中的所有复选框上进行ng-checked选中，例如：
ng-checked="allChecked()"
where allChecked is a function in controller which finds out whether all names have been selected or not. 其中allChecked是控制器中的一个函数，用于查找是否已选择所有名称。 Something like, 就像是，
$scope.allChecked = function() {
return $scope.names.filter(obj => obj.select).length === $scope.names.length
}
EDIT : Without arrow function, 编辑 ：没有箭头功能，
$scope.allChecked = function() {
var selectedNames = $scope.names.filter(function(obj) {
return obj.select
});
return selectedNames.length === $scope.names.length
}
解决方案2
1 2017-05-04 11:29:20
Below given code may help you . 下面给出的代码可能会帮助您。 Once your are checking or unchecking any All Checkbox from top most checkbox then you done code to check All. 一旦您选中或取消选中了最顶部复选框中的所有复选框，便完成了代码以选中全部。 But for Individual checkbox's on ng-click you call a function but not implemented this function. 但是对于ng-click上的单个复选框，您调用了一个函数，但未实现此函数。 Here is your updated code . 这是您更新的代码。
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<p>Click the table headers to change the sorting order:</p>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>
<button type="button" ng-click="remove($index)">Delete Selected</button>
</p>
<table border="1" width="100%">
<tr>
<th>
<input type="checkbox" ng-model="selectAll" ng-click="checkAll()" />
</th>
<th></th>
<th>Sl no</th>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
<th>Delete</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy">
<td>
<input type="checkbox" ng-model="x.select" ng-click="xsetting(x)" />
</td>
<td>{{x.select}}</td>
<td>{{$index+1}}</td>
<td>{{x.name}}</td>
<td>{{x.country}}</td>
<td>
<button type="button" ng-click="Delete(x)">Delete</button>
</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', ['$scope', 'filterFilter', function($scope, filterFilter) {
$scope.names = [{
name: 'Jani',
country: 'Norway'
}, {
name: 'Carl',
country: 'Sweden'
}, {
name: 'Margareth',
country: 'England'
}, {
name: 'Hege',
country: 'Norway'
}, {
name: 'Joe',
country: 'Denmark'
}, {
name: 'Gustav',
country: 'Sweden'
}, {
name: 'Birgit',
country: 'Denmark'
}, {
name: 'Mary',
country: 'England'
}, {
name: 'Kai',
country: 'Norway'
}];
//for sorting the rows
$scope.orderByMe = function(x) {
$scope.myOrderBy = x;
}
//single row deletion
$scope.Delete = function(x) {
$scope.names.splice($scope.names.indexOf(x), 1);
};
//selecting all checkboxes in the table
$scope.checkAll = function() {
angular.forEach($scope.names, function(x) {
x.select = $scope.selectAll;
});
};
$scope.xsetting = function(x) {
$scope.selectAll = true;
angular.forEach($scope.names, function(v, k) {
if (!v.checked) {
$scope.selectAll = false;
}
});
}
//for selecting and deleting checked items
$scope.remove = function() {
$scope.names = filterFilter($scope.names, function(x) {
return !x.select;
});
};
}]);
</script>
</body>
</html>
Here is http://plnkr.co/edit/TmF4jFtRmFFKoYngSYpq?p=preview and it is working. 这是http://plnkr.co/edit/TmF4jFtRmFFKoYngSYpq?p=preview ，它正在运行。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.