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

　　思路分析：

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

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

　　代码：

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

1     var myTest = angular.module("myTest", []);  2   3     myTest.directive("selremove", function () {  4   5         return {  6   7             restrict: 'ECMA',  8             scope: {  9                 getOpitems: '&', 10                 id: '@id' 11             }, 12             template: '
      
       ' + 13                             '
         ' + 14                                 '
' + 17                                 '
' + 21                              '
' + 22                        '
       
        
         
' + 15                                      '' + 16                                 '
         
' + 18                                     '' + 19                                     '' + 20                                 '
        
       
      
', 23             controller: function ($scope) { 24  25                 $scope.data = { 26                     opItems: $scope.getOpitems(), 27                     selectedOption: [], 28                     selectedAllOption: [] 29                 }; 30  31                 //右移 32                 $scope.NextFun = function () { 33                     console.log("NextFun"); 34                     var selOption = $scope.data.selectedOption;  //使用的是自带的选择option 35                     for (var i in selOption) { 36  37                         var item = selOption[i]; 38                         for (var ii in $scope.data.opItems) { 39  40                             var item01 = $scope.data.opItems[ii]; 41                             if (item01.val != item.val || !angular.isObject(item01)) { continue; } 42  43                             //添加到最终选中框 44                            // console.log("next:" + item01.val); 45                             $scope.data.selectedAllOption.push(item01); 46                             //移除opItems数据 47                             $scope.data.opItems.splice(ii, 1); 48                             break; 49                         } 50                     } 51                 } 52  53                 //左移 54                 $scope.PrevFun = function () { 55  56                     console.log("PrevFun"); 57                     var selOption = $scope.data.selectedOption; 58  59                     for (var i in selOption) { 60  61                         var item01 = selOption[i]; 62                         for (var ii in $scope.data.selectedAllOption) { 63  64                             var item = $scope.data.selectedAllOption[ii]; 65                            // console.log(item01.val + "|" + item.val + "|" + ii); 66                             if (item01.val != item.val || !angular.isObject(item)) { continue; } 67  68                             //添加到原始集合 69                             $scope.data.opItems.push(item); 70                             //移除selectedAllOption数据 71                             $scope.data.selectedAllOption.splice(ii, 1); 72                             break; 73                         } 74                     } 75                 } 76             } 77         } 78     }); 79  80     myTest.controller("OpCtrl", function ($scope) { 81  82         $scope.OpItems = [ 83             { 84                 name: "苹果", 85                 val: "1" 86             }, 87             { 88                 name: "橘子", 89                 val: "2" 90             }, 91             { 92                 name: "番茄", 93                 val: "3" 94             }, 95             { 96                 name: "香蕉", 97                 val: "4" 98             }, 99             {100                 name: "汽车",101                 val: "5"102             },103             {104                 name: "作业",105                 val: "6"106             },107             {108                 name: "工资",109                 val: "7"110             },111             {112                 name: "游戏",113                 val: "8"114             },115             {116                 name: "冲浪",117                 val: "9"118             }119         ];120     });

　　上面使用的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