最近遇到一个需求,需要把请求到每个账户的可选择权限展示出来供用户选择,以下就用类似的例子来表示。一个班级每个学生可以选择的课程。
HTML代码:
<div ng-repeat="student in vm.studentList">
<div>{{student.no}}/{{student.name}}</div>
<div>
<md-checkbox ng-repeat="class in student.classList" ng-checked="class.checked" ng-click="vm.selectClass(class,student)"></md-checkbox>
</div>
</div>
JS代码:
// 学生数据
vm.studentList = [{
no:'001',
name:'zhangsan',
classList:[{
classId:'1001',
className:'语文',
checked:false
},{
classId:'1002',
className:'数学',
checked:false
},{
classId:'1003',
className:'英语',
checked:false
},{
classId:'1004',
className:'美术',
checked:false
},{
classId:'1005',
className:'劳动',
checked:false
}]
},{
no:'002',
name:'lisi',
classList:{
classId:'1001',
className:'语文',
checked:false
},{
classId:'1002',
className:'数学',
checked:false
},{
classId:'1003',
className:'英语',
checked:false
},{
classId:'1004',
className:'美术',
checked:false
}
},{
no:'003',
name:'wanger',
classList:[{
classId:'1003',
className:'英语',
checked:false
},{
classId:'1004',
className:'美术',
checked:false
},{
classId:'1005',
className:'劳动',
checked:false
}]
}];
// 选择课程时
vm.selectClass = function (student,class){
// 使用深拷贝方法分隔每个学生的课程list
var _class = angular.copy(student.classList);
// 循环当前学生的课程list,并找到此时选中的课程并改变checkbox的值
angular.forEach(_class, function(item){
if (item.classId === class.classId) {
item.checked = !item.checked;
}
});
// 把此时重新赋过值的课程list重新赋给学生对象里的课程list
student.classList = _class;
}
之所以用这样的方法,是因为使用ng-model绑定class.checked的值时,再使用ng-change去改变class.checked的值会发生错乱,导致整个数组的对应id的checked值都会同步发生变化,做不到真正的双向绑定。也从网上找到一些相应的解决方法,使用ng-model可以做到正确的数据展示,但是手动改变值的时候就没有什么用了,大多数的解决方法都是利用索引去找到当前绑定的数据,做到与绑定的数据的唯一性,但是也没有什么用。
这可能不是最优解,但是是本人当前想到最好的办法,希望大家如果有更好更简单的方法,欢迎大家留言评论。这是第一次写文,有不足之处请大家多多指教,后面会逐渐完善写文的方法的。