angular 的二级联动(forEach实战)

时间：2016-09-26 19:46:18 阅读：120 评论：0 收藏：0 [点我收藏+]

标签：

在下才疏学浅，不足之处，还望多多指教。

直接上代码

<!DOCTYPE html>
<html lang="en" ng-app="indexApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/angular.js"></script>
    <style>
        select{
            width:150px;
            vertical-align:middle;
        }
        p{
            display: inline-block;
            cursor: pointer;
        }
    </style>
</head>
<body ng-controller="indexCtrl">
<select ng-change="changeOne(oneData,first)" ng-model="oneData">
    <option ng-repeat="item in first" value="{{item.id}}">{{item.name}}</option>
</select>

<select ng-change="changeTwo()" ng-model="twoData" multiple="multiple" size="10">
    <option ng-repeat="item in next" value="{{item.id}}">{{item.name}}</option>
</select>

<p>
    <span ng-click="addLast(twoData,next)">-></span><br>
    <span ng-click="delLast(lastData,last)"><-</span>
</p>

<select ng-model="lastData" size="10" multiple="multiple">
    <option ng-repeat="item in last track by $index" value="{{item.id}}">{{item.name}}</option>
</select>

<script>
    angular.module(‘indexApp‘,[])
            .controller(‘indexCtrl‘,function($scope){
                $scope.first =[
                    {
                        id:1,
                        name:‘前端‘,
                        child:[
                            {id:1,name:‘CSS3‘},
                            {id:2,name:‘HTML‘},
                            {id:3,name:‘js‘},
                            {id:4,name:‘angular‘},
                            {id:5,name:‘bootstrap‘}
                        ]
                    },
                    {
                        id:2,
                        name:‘后端‘,
                        child:[
                            {id:6,name:‘java‘},
                            {id:7,name:‘php‘},
                            {id:8,name:‘node‘}
                        ]
                    }
                ];

                $scope.changeOne = function(oneData,first){
                    angular.forEach(first,function(i,j){
                        if(oneData == i.id){
                            $scope.next = i.child;
                        }
                    })
                };

                var boxLast=[];

                $scope.addLast = function(twoData,next){
                    //添加
                    next.forEach(function(i,j){
                        if(parseInt(twoData) == parseInt(i.id)){
                            boxLast.push(i)
                        }
                    });
                    //排重
                    var a ={},b=[],c=[];
                    for(var i =0;i<boxLast.length;i++){
                        if( !a [boxLast[i].id] ){
                            a [boxLast[i].id]=true;
                            b.push(boxLast[i]);
                        }else{
                            c.push(boxLast[i].name);
                        }
                    }
                    if(c.length>0){
                        alert(c+‘已添加‘);
                    }
                    boxLast = b;
                    $scope.last = b;


                };

                $scope.delLast = function(lastData,last){
                    last.forEach(function(i,j){
                        if(parseInt(lastData) == parseInt(i.id)){
                            $scope.last.splice(j,1); //删除从 左往右的 第n个 数组内容，删除一个
                        }
                    })
                };
            });

</script>
</body>
</html>