求一个angular方法，判断复选框是否全选和复选框是否多选？

Question

求一个angular方法，判断复选框是否全选和复选框是否多选？
需求是，

当我点击选中指定项后，angular变成全选
当我再次点击选中指定向后，angular变成单选
如果是单选，我想要知道单选项
如果是多选，我需要判断是否是选择了全选功能，

就是类似的这个功能。求大佬指点，谢谢了！！！！！

Answer 1

你要的功能不就是根据页面的选中情况把数据发送回服务端么？你之前的描述和你的需求完全是两回事。
angular做这个功能就非常容易，angular的核心是双向数据绑定，嵌套循环搞定这个很容易。第一个大循环把外层的列表显示出来，然后再把选中项的数据循环出来，放到弹窗里就行了。不需要关心你之前写的那些判断，angular自己能搞定。你唯一要做的东西，就是在用户全选的时候，需要循环子选项，把他们都设置成1.之后post的时候，直接把数据发回去就可以了。因为是双向绑定，选中和取消都会在数据中直接引起数据变化，不需要手动改变数据。

Answer 2

循环input判断,最简单粗暴

Answer 3

同意楼上的，遍历，简单粗暴。

不想遍历就每次单击的时候计数呗，不过我还是觉得遍历好，比较也没DOM啥的，遍历挺快的

Answer 4

angular 2.x

.template

<table>
<tbody>
<ng-container *ngFor="let group of groups">
<tr style="background-color: gray;">
 <td><input type="checkbox" [(ngModel)]="group.checked" (change)="turnAll(group)">全选</td>
 <td>{{group.name}}</td>
</tr>
<tr *ngFor="let item of group.items">
 <td><input type="checkbox" (change)="turnItem(group)" [(ngModel)]="item.checked"></td>
 <td>{{item.price}}</td>
 <td>{{item.prop1}}</td>
 <td>{{item.propN}}</td>
</tr>
</ng-container>
</tbody>
</table>

.ts

groups: Array<any> = [{ name: 'group1', items:[...] }, { name: 'group2', items:[...] }];
lock=false;

turnItem(group) {
    if(lock) return;
    lock=true;
    group.checked=group.items.every(item => item.checked);
    lock=false;
}

turnAll(group){ 
    if(lock) return;
    lock=true;
    group.items.forEach(i=>i.checked=group.checked); 
    lock=false;
}

---

angular 1.x

.html

<table>
<tbody>
<ng-container ng-repeat="group in groups">
<tr style="background-color: gray;">
 <td><input type="checkbox" ng-model="group.checked" ng-change="turnAll(group)">全选</td>
 <td>{{group.name}}</td>
</tr>
<tr ng-repeat"item in group.items">
 <td><input type="checkbox" ng-change="turnItem(group)" ng-model="item.checked"></td>
 <td>{{item.price}}</td>
 <td>{{item.prop1}}</td>
 <td>{{item.propN}}</td>
</tr>
</ng-container>
</tbody>
</table>

.js

app.controller('myCtrl', function($scope) {
    var lock=false;
    
    $scope.groups = [{ name: 'group1', items:[...] }, { name: 'group2', items:[...] }];
    
    $scope.turnItem(group) {
    if(lock) return;
    lock=true;
    group.checked=group.items.every(item => item.checked);
    lock=false;
}

$scope.turnAll(group){ 
    if(lock) return;
    lock=true;
    group.items.forEach(i=>i.checked=group.checked); 
    lock=false;
}

});

Answer 5