ng-directive-选择数据

　　本文是用angularjs指令写的一个简易数据选择功能，其实就是两个下拉框，把两边的数据相互交换而已，这样的功能最早应该是用jquery写过，但移动端js框架angularjs如果还嵌套jquery来写效果，这样就显的没有可用性了，并且在前不久QQ讨论群里面也有人问题这样的功能用ng怎么实现，在这就顺便发上一篇吧，勿喷，界面如下：

　　思路分析：

　　　　1.单选或多选这左边的数据，左边选择的数据就移除变动到后面的选择框中，后面选择框的功能反过来也是一样的；

　　　　2.看起来这两个选择框的功能是一模一样的，没错这里关键的问题就在于这两个框之前必须保持的关系，因为复杂的业务界面通常有多个选择框，这样就必须要知道那两个框是对应的，这里使用的是插件Id来保持关系

　　代码：

　　　　功能主要分为两个方法，选择左边数据时候的处理方法和右边数据的处理方法如下：

    var myTest = angular.module("myTest", []);

    myTest.directive("selremove", function () {

        return {

            restrict: 'ECMA',
            scope: {
                getOpitems: '&',
                id: '@id'
            },
            template: '<table>' +
                            '<tr>' +
                                '<td>' +
                                     '<select  id="{{id}}01" multiple ng-click="NextFun()" ng-options="option.name for option in data.opItems track by option.val" ng-model="data.selectedOption"></select>' +
                                '</td>' +
                                '<td>' +
                                    '<select  id="{{id}}02" multiple ng-click="PrevFun()"  ng-options="option.name for option in data.selectedAllOption track by option.val" ng-model="data.selectedOption">' +
                                    '</select>' +
                                '</td>' +
                             '</tr>' +
                       '</table>',
            controller: function ($scope) {

                $scope.data = {
                    opItems: $scope.getOpitems(),
                    selectedOption: [],
                    selectedAllOption: []
                };

                //右移
                $scope.NextFun = function () {
                    console.log("NextFun");
                    var selOption = $scope.data.selectedOption;  //使用的是自带的选择option
                    for (var i in selOption) {

                        var item = selOption[i];
                        for (var ii in $scope.data.opItems) {

                            var item01 = $scope.data.opItems[ii];
                            if (item01.val != item.val || !angular.isObject(item01)) { continue; }

                            //添加到最终选中框
                           // console.log("next:" + item01.val);
                            $scope.data.selectedAllOption.push(item01);
                            //移除opItems数据
                            $scope.data.opItems.splice(ii, 1);
                            break;
                        }
                    }
                }

                //左移
                $scope.PrevFun = function () {

                    console.log("PrevFun");
                    var selOption = $scope.data.selectedOption;

                    for (var i in selOption) {

                        var item01 = selOption[i];
                        for (var ii in $scope.data.selectedAllOption) {

                            var item = $scope.data.selectedAllOption[ii];
                           // console.log(item01.val + "|" + item.val + "|" + ii);
                            if (item01.val != item.val || !angular.isObject(item)) { continue; }

                            //添加到原始集合
                            $scope.data.opItems.push(item);
                            //移除selectedAllOption数据
                            $scope.data.selectedAllOption.splice(ii, 1);
                            break;
                        }
                    }
                }
            }
        }
    });

    myTest.controller("OpCtrl", function ($scope) {

        $scope.OpItems = [
            {
                name: "苹果",
                val: "1"
            },
            {
                name: "橘子",
                val: "2"
            },
            {
                name: "番茄",
                val: "3"
            },
            {
                name: "香蕉",
                val: "4"
            },
            {
                name: "汽车",
                val: "5"
            },
            {
                name: "作业",
                val: "6"
            },
            {
                name: "工资",
                val: "7"
            },
            {
                name: "游戏",
                val: "8"
            },
            {
                name: "冲浪",
                val: "9"
            }
        ];
    });

　　上面使用的ng指令的规范，就不用说了，必须要按照ng规则来写指令，想说的是这段代码-ng-options="option.name for option in data.opItems track by option.val"使用了ng自带的数据展示方式，类似于for循环遍历数据；

　　上面的代码是封装了一个ng指令，然后在页面上只需要一句代码如：<selremove id="sel" get-opitems="OpItems"></selremove> 这样就能把两个选择框展示出来，功能实现；

　　这功能简单没有什么说的也没用到什么nb的技术，关键想强调的是ng的规范性，web界面效果实现起来的简单分析，勿喷。

　　效果的展示地址：http://7xn3fx.com1.z0.glb.clouddn.com/左右选择数据.html