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

yyccQQu
  • 340

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

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

clipboard.png

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

回复
阅读 2.5k
5 个回答
G_Koala_C
  • 5.1k
✓ 已被采纳

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

循环input判断,最简单粗暴

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

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

unicreators
  • 121

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;
}

});
宣传栏