angular开发中遇到的问题总结

今天遇到的问题总结（2017-07-25）

一、angular中ng-repeat嵌套循环显示的问题

今天遇到一个问题是使用angular来实现通过父元素的值来获取对应的子元素（这里的元素的显示都是通过向后台请求数据获取的，子元素的获取需要对应的父元素的参数id），且点击某个父元素的时候实现对应的子元素的显示与隐藏，最开始我的实现思路是在点击某个父元素的时候，向后台发送请求，这样基本上需求也可以实现，但是还涉及到子元素的的选中显示，所以每点击一点发送一次请求这种方法是存在问题的：首先是增加了请求的次数，还有就是无法保留每次的选中状态。
出于这样的考虑我决定在页面加载之前就请求到所有的子元素和父元素的数据，这就需要思考对应的子元素如何获取了。
最开始我是先获取到所有的分组即父元素放在一个数组team中，然后通过循环获取到每一个分组对应的成员放在另一个数组persons.push()中。外层的分组通过ng-repeat数组team,内层的成员通过ng-repeat数组persons[$index]获得，内层元素的id和对应的子元素的teamId是对应的，所以可通过这样进行过滤，具体的代码如下：

<div class="addressMember">
   <span class="memberName" style="text-align: center">通讯录人员</span>
    <div class="allMember">
       <ul ng-repeat="item in vm.team">
         <li id="{{item.id}}" ng-click="vm.showPerson(item.id, item)">>{{item.tName}}({{item.account}}人)</li>
             <li ng-repeat="items in vm.persons | filter: {teamId: item.id}" ng-show="items.teamId == vm.activeIndex && vm.isClicked">&nbsp;&nbsp;{{items.cName}}
             <input type="checkbox" id="{{$index}}" name="{{items.cName}}" ng-click="vm.chose(items,$event,items.id)" ng-checked="isSeclected(items.id)">
             </li>
         </ul>
    </div>
 </div>
 <div class="inviteMember">
    <div class="memberName">
       <span class="invited">邀请的与会人员</span>
       <span class="clearAll" ng-click="vm.clearAll()"> 清除全部</span>
    </div>
    <div class="allInviter">
       <ul>
          <li ng-repeat="item in vm.participants track by $index">{{item.cName}}</li>
       </ul>
    </div>
</div>

对应的逻辑代码如下：

init(){
this.remote.getTeam()
            .then((res) => {
                if (res.data.code == 0) {
                    this.team = res.data.data;
                    for (let i = 0; i < res.data.data.length; i++) {
                        this.remote.getPerson(this.team[i].id)
                            .then((res) => {
                                this.persons.push(res.data.data);
                            })
                    }
                }

            })

        })
   }
   showPerson(id, item) {
        if (this.activeIndex != id) {
             this.isClicked = true;
        } else {
            this.isClicked = !this.isClicked;
        }
        this.activeIndex = id;
    }

实现发现子成员的显示有问题，只能显示第一个组下的成员，于是将代码做了一定的修改，循环获取的子成员直接放在分组的children属性中，这样渲染子元素会方便很多，
具体的修改代码如下:

    <div class="addressMember">
                <span class="memberName" style="text-align: center">通讯录人员</span>
                <div class="allMember">
                    <ul ng-repeat="item in vm.team">
                        <li id="{{item.id}}" ng-click="vm.showPerson(item.id, item)">>{{item.tName}}({{item.account}}人)</li>
                        <li ng-repeat="items in item.children | filter: {teamId: item.id}" ng-show="items.teamId == vm.activeIndex && vm.isClicked">&nbsp;&nbsp;{{items.cName}}
                            <input type="checkbox" id="{{$index}}" name="{{items.cName}}" ng-click="vm.chose(items,$event,items.id)" ng-checked="isSeclected(items.id)">
                        </li>
                    </ul>
                </div>
            </div>

对应的js逻辑

    this.remote.getTeam()
        .then((res) => {
            if (res.data.code == 0) {
                this.team = res.data.data;
                for (let i = 0; i < res.data.data.length; i++) {
                    this.remote.getPerson(this.team[i].id)
                        .then((res) => {
                            this.team[i].children = res.data.data;
                        })
                }
            }
        })

二、angular实现单/复选框的选中与反选获取值的问题

这个问题和上面的问题是有关联的，所以html代码就是上面的部分，实现复选框选中就是对具体成员的选择，选中的成员会显示到邀请的人员中，当不选中的时候，邀请成员会去掉该成员，如图所示：
逻辑实现如下：

chose(item, $event,id) {
        let checkbox=$event.target;
        let actions=(checkbox.checked?"add":"remove");
        this.updateSelected(actions,id,checkbox.name,item);
    }
    updateSelected(action,id,name,item){
        if(action == 'add'){
            this.participants.push(item);
        }
        if(action == 'remove'){
            this.participants=this.participants.filter(function (item) {
                return item.id != id;
            })
        }
    }
    isSelected(id){
        return this.participants.push(id)
    }