如果我检查所有复选框，选择所有复选框应自动检查，反之亦然AngularJS
如果我选中了全部复选框，那么所有复选框都会被检查。但是，当我单独检查每个复选框时，问题就会出现，选择所有复选框应该被自动检查，反之亦然。 下面是代码：如果我检查所有复选框，选择所有复选框应自动检查，反之亦然AngularJS
<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-checked所有复选框，如：
ng-checked="allChecked()"
其中allChecked是在控制器中的功能，找出是否所有的名字已被选中或不。喜欢的东西，
$scope.allChecked = function() {
return $scope.names.filter(obj => obj.select).length === $scope.names.length
}
编辑：如果没有箭头的功能，
$scope.allChecked = function() {
var selectedNames = $scope.names.filter(function(obj) {
return obj.select
});
return selectedNames.length === $scope.names.length
}
下面给出的代码可以帮助你。一旦您从最上面的复选框中选中或取消选中任何全部复选框，则您将完成代码检查全部。但是对于单独的复选框，您可以调用一个函数但不执行此函数。这是你的更新代码。
<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，它正在工作。
其实它是部分工作。当我检查所有个人复选框，然后选择所有复选框没有被选中，而如果我检查选择所有复选框，然后我取消选中一个，它的工作 –
你能告诉我你现在面临什么问题吗？ –
在上面提到的代码中，我使用=>符号。 –
我在eclipse中使用angularjs。所以在eclipse中使用“=>”符号显示错误。任何建议我可以做什么？ –
是的，其实昨天它没有工作。但今天，当我试图用这个符号工作。他们在月蚀中的任何问题。它显示该符号的错误，但工作正常。我在这里有另一个问题是链接http://stackoverflow.com/questions/43800095/while-editing-a-row-how-does-the-cancel-button-will-work-and-if-i-want-编辑 –