javascript 选择 ng-repeat 中的所有复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29002278/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
select all checkboxes inside ng-repeat
提问by forgottofly
Am having a list of check boxes in ng-repeat as:
我在 ng-repeat 中有一个复选框列表：
<div ng-repeat="item in results">
<label class="inlinelabel checkbox">
<input type="checkbox" ng-model="selected[item.id]"><i></i>
</label>
</div>
I would like to select all checkboxes on click of a single check box that is outside the ng-repeat.
我想通过单击 ng-repeat 之外的单个复选框来选择所有复选框。
<label> Select All </label>
<input type="checkbox" data-ng-model="selectedAll" ng-click="checkAll()">
I tried the code in controller but its not working.
我尝试了控制器中的代码，但它不起作用。
$scope.checkAll=()=>{
if ($scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.employees,function (selected) {
selected[selected.id] = $scope.selectedAll;
});
}
回答by New Dev
The other answers here indeed make all the checkboxes "selected", but I think the idea is to make the underlying model also change, which those answers fail to do.
这里的其他答案确实使所有复选框都“被选中”，但我认为这个想法是使底层模型也发生变化，而这些答案未能做到。
This is because Angular would not change the model when ng-checkedchanges. Instead, the right way to "select all" is to change the models - and the View just follows.
这是因为 Angular 在改变时不会改变模型ng-checked。相反，“全选”的正确方法是更改模型 - 视图紧随其后。
<button ng-click="selectAll()">select all</button>
<div ng-repeat="item in items">
<label>
{{item.n}}:
<input type="checkbox" ng-model="selected[item.id]">
</label>
</div>
And in the controller, simply set all the items to be truein selected:
和控制器，只需将所有项目要true在selected：
$scope.selected = {};
$scope.selectAll = function(){
for (var i = 0; i < $scope.items.length; i++) {
var item = $scope.items[i];
$scope.selected[item.id] = true;
}
};
The ViewModel "drives" the View (with the exception of the bi-directional directives, like ng-model, that allows the View to change the ViewModel, typically based on user interaction), so whenever you want to change something, start by asking yourself "how would I want the ViewModel to look like", rather than, how the View should look. The View will follow the ViewModel.
ViewModel“驱动”View（双向指令除外，例如ng-model，允许View更改ViewModel，通常基于用户交互），因此无论何时您想更改某些内容，首先要问自己“如何我是否希望 ViewModel 看起来像”，而不是 View 应该是什么样子。View 将遵循 ViewModel。
回答by Vipin
You can use "for in loop" to achieve this
您可以使用“for in loop”来实现这一点
HTML code:
HTML代码：
<button ng-click="checkAll()">check all</button>
<div ng-repeat="item in items">
<p>
{{item.n}}:
<input type="checkbox" ng-model="sel[item.id]">
</p>
</div>
Controller Code:
控制器代码：
$scope.items = [
{id: 123, name: "checkbox1"},
{id: 234, name: "checkbox2"},
{id: 456, name: "checkbox3"},
{id: 567, name: "checkbox4"},
];
$scope.sel = {};
$scope.checkAll = function()
{
for(i in $scope.items)
$scope.sel[$scope.items[i].id]=true;
}
Please check the working demo in plunker
请检查plunker中的工作演示
回答by ch271828n
Er, is it wrong with the ifcode? It does nothing if you write that. Try below.
呃，是不是if代码有问题？如果你这样写，它什么都不做。下面试试。
if (!$scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
回答by squiroid
It's better to use ng-checked
最好使用 ng-checked
Small working demo :)
小型工作演示:)
<div ng-controller="MyCtrl">
<div ng-repeat="item in results">
<label class="inlinelabel checkbox">
<input type="checkbox" ng-model="item.id" ng-checked="checkall"><i>{{item.name}}</i>
</label>
</div>
<label> Select All </label>
<input type="checkbox" data-ng-model="selectedAll" ng-click="checkAll()">
</div>
function MyCtrl($scope) {
$scope.checkall=false;
$scope.results=[
{'id':'1','name':'rachit'},
{'id':'2','name':'rachit1'},
{'id':'3','name':'rachit2'}
];
$scope.checkAll=function(){
if ($scope.selectedAll) {
$scope.checkall = true;
} else {
$scope.checkall = false;
}
}
}
Small demo here:) Fiddle
这里的小演示:) Fiddle
回答by K K
Using the demo by squiroid, You can also do this: Demo: http://jsfiddle.net/lotusgodkk/jh1svmr0/1/
使用 squiroid 的演示，您也可以这样做：演示：http: //jsfiddle.net/lotusgodkk/jh1svmr0/1/
HTML:
HTML：
<div ng-controller="MyCtrl">
<div ng-repeat="item in results">
<label class="inlinelabel checkbox">
<input type="checkbox" ng-model="item.id" ng-checked="toggle"><i>{{item.name}}</i>
</label>
</div>
<label>Select All</label>
<input type="checkbox" data-ng-model="selectedAll" ng-click="toggle=!toggle">
</div>
JS:
JS：
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.toggle = false;
$scope.results = [{
'id': '1',
'name': 'rachit'
}, {
'id': '2',
'name': 'rachit1'
}, {
'id': '3',
'name': 'rachit2'
}
];
}
回答by xiaoshier
you can toggle checkbox and get the value like this.By the way use linq.js.
你可以切换复选框并获得这样的值。顺便说一下使用linq.js。
<dl ng-controller="selectCtrl">
<dt>
<input type="checkbox" ng-model="selectAll" ng-change="toggleSelect('all')"/> select all
</dt>
<dd ng-repeat="x in list">
<input type="checkbox" ng-model="select[$index]" ng-change="toggleSelect()" ng-true-value="{{x.id}}" ng-false-value="" />{{x.name}}
</dd>
</dl>
var app = angular.module('app', []);
app.controller('selectCtrl', function ($scope) {
$scope.selectAll = false;
$scope.select = [];
$scope.toggleSelect = function (tag) {
if (tag == 'all') {
if ($scope.selectAll) {
$scope.select = $.Enumerable.From($scope.list).Select("$.id").ToArray();
} else {
$scope.select = []
}
} else {
var items = $.Enumerable.From($scope.select).Where('$').ToArray();
$scope.select = $.Enumerable.From($scope.list).Select(function (x) {
if (items.indexOf(x.name) > -1) {
return x.name;
}
return '';
}).ToArray();
$scope.selectAll = !$.Enumerable.From($scope.select).Any('!$');
}
};
$scope.checkSelect = function () {
return $.Enumerable.From($scope.select).Any('$');
};
$scope.list =
[
{id: 1, name: "checkbox1"},
{id: 2, name: "checkbox2"},
{id: 3, name: "checkbox3"},
{id: 4, name: "checkbox4"}
];
});
