AngularJs 使用ng-repeat循环嵌套遇到的问题

最近遇到一个需求,需要把请求到每个账户的可选择权限展示出来供用户选择,以下就用类似的例子来表示。一个班级每个学生可以选择的课程。

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可以做到正确的数据展示,但是手动改变值的时候就没有什么用了,大多数的解决方法都是利用索引去找到当前绑定的数据,做到与绑定的数据的唯一性,但是也没有什么用。

这可能不是最优解,但是是本人当前想到最好的办法,希望大家如果有更好更简单的方法,欢迎大家留言评论。这是第一次写文,有不足之处请大家多多指教,后面会逐渐完善写文的方法的。

  • 11
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值