本文是用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: '<table>' + 13 '<tr>' + 14 '<td>' + 15 '<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>' + 16 '</td>' + 17 '<td>' + 18 '<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">' + 19 '</select>' + 20 '</td>' + 21 '</tr>' + 22 '</table>', 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
