如果我选中了顶部的选中所有复选框，那么所有复选框都会被选中。但是，当我单独检查每个复选框时，问题就出现了，应自动检查全选复选框，反之亦然。 这是代码:
<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>
这是 plunker 的链接 http://plnkr.co/edit/LFShX3PTEITLaN7fSElX?p=preview
有人可以帮忙吗？
最佳答案
下面给出的代码可能会对您有所帮助。一旦您选中或取消选中最顶部复选框中的任何“所有”复选框，您就完成了代码来选中“全部”。但是对于 ng-click 上的单个复选框，您调用了一个函数，但没有实现该函数。这是您更新后的代码。
<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>
这里是http://plnkr.co/edit/TmF4jFtRmFFKoYngSYpq?p=preview并且它正在工作。
关于javascript - 如果我选中所有复选框，则应自动选中全选复选框，在 AngularJS 中反之亦然，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43781272/