ng-directive-选择数据

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

  本文是用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     });
View Code

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

 

目录
相关文章
|
API 容器
ng中的ng-content ng-template ng-container
ng中的ng-content ng-template ng-container
96 0
angular29-ng-hide,ng-show
angular29-ng-hide,ng-show
70 0
angular29-ng-hide,ng-show
|
JavaScript 前端开发 测试技术
一文了解 ng-template, ng-content, ng-container, 和 *ngTemplateOutlet的区别
一文了解 ng-template, ng-content, ng-container, 和 *ngTemplateOutlet的区别
128 0
一文了解 ng-template, ng-content, ng-container, 和 *ngTemplateOutlet的区别
SAP Spartacus 里 ng-template和ng-container的嵌套使用
SAP Spartacus 里 ng-template和ng-container的嵌套使用
SAP Spartacus 里 ng-template和ng-container的嵌套使用
|
SQL 开发框架 .NET
ng-template 和 TemplateRef.createEmbeddedView
ng-template 和 TemplateRef.createEmbeddedView
116 0
ng-template 和 TemplateRef.createEmbeddedView
ng-controller and ng-model的工作原理
ng-controller and ng-model的工作原理
ng-controller and ng-model的工作原理
|
前端开发 JavaScript 对象存储
ng-animate和ng-cookies用法
———ng-animate 本文讲一下Angular中动画应用的部分。 首先,Angular本生不提供动画机制,需要在项目中加入Angular插件模块ngAnimate才能完成Angular的动画机制,Angular也不提供具体的动画样式,所以说,它的自由度和可定制性挺大的。
1458 0
|
Ubuntu Linux 容器