如何通过Angular实现两级checkbox的嵌套长尾词查询？

本文共计497个文字，预计阅读时间需要2分钟。

数据视图：状态正常，成功。数据包含：- ID: 1，名称: admin:all，子模型: [admin:user, admin:department, admin:role]- ID: 18，名称:

数据视图

{ "status": 1, "msg": "success", "data": [ { "id": 1, "name": "admin:all", "childModel": [ { "id": 2, "name": "admin:user" }, { "id": 3, "name": "admin:department" }, { "id": 4, "name": "admin:role" } ] }, { "id": 18, "name": "product:all", "childModel": [ { "id": 19, "name": "product:set" }, { "id": 20, "name": "product:size" }, { "id": 21, "name": "product:activity" }, { "id": 28, "name": "product:list" } ] }, { "id": 5, "name": "report:all", "childModel": [ { "id": 6, "name": "report:income" }, { "id": 7, "name": "report:sold" }, { "id": 8, "name": "report:visit" }, { "id": 9, "name": "report:resume" } ] }, { "id": 22, "name": "page:all", "childModel": [ { "id": 26, "name": "page:list" }, { "id": 27, "name": "page:add" } ] }, { "id": 23, "name": "banner:all", "childModel": [ { "id": 24, "name": "banner:list" }, { "id": 25, "name": "banner:add" } ] }, { "id": 10, "name": "resource:all" }, { "id": 11, "name": "feedback:all" }, { "id": 12, "name": "question:all", "childModel": [ { "id": 31, "name": "question:list" }, { "id": 32, "name": "question:add" } ] }, { "id": 13, "name": "coupon:all", "childModel": [ { "id": 29, "name": "coupon:list" }, { "id": 30, "name": "coupon:add" } ] }, { "id": 14, "name": "order:all", "childModel": [ { "id": 15, "name": "order:plan" }, { "id": 16, "name": "order:deliver" }, { "id": 17, "name": "order:list" } ] } ] } 页面布局

{{item.name}} {{child.name}} 脚本处理

checkAll(pid, arr) { var _this = this; if (_this.perArr[pid]) { for (var i = 0; i < arr.length; i++) { _this.perArr[arr[i].id] = true; } } else { for (var i = 0; i < arr.length; i++) { _this.perArr[arr[i].id] = false; } } }, checkChild(pid, arr) { var _this = this; for (var i = 0; i < arr.length; i++) { if(!_this.perArr[arr[i].id]){ _this.perArr[pid] = false; break; } _this.perArr[pid] = true; } }, 思路说明

1.点击父级时，传入父级id以及当前所有的子节点，首先判断父级id是否处于选中状态，如果是，则遍历他下面的所有子节点，并设置为true;反之，则全部设为false 2.点击子节点时，传入父级id以及当前所有的兄弟节点，遍历兄弟节点是否都是处于选中状态，如果是，则将父级设为true，一旦有一个兄弟节点是false,则将父级置为false，并跳出循环