在开发表单时，我们需要使用经常需要使用到用户选择器，用户的数据一般使用如下方式存储：

用户1,用户2,用户3

 

我们可以使用angular指令实现选择器。

<!DOCTYPE html>

<html ng-app="app">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <script src="../assets/js/angular.min.js"></script>

    <link rel="stylesheet" href="../assets/css/bootstrap.min.css">

    <link rel="stylesheet" href="../assets/css/bootstrap-theme.min.css">

    <link rel="stylesheet" href="../assets/css/component.css">

    <link rel="stylesheet" href="../assets/css/form.css">

    <link rel="stylesheet" href="../assets/css/font-awesome.min.css">

     <script src="../assets/js/angular.min.js"></script>

     <script type="text/javascript">

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

         base.directive('htSelector', function() {

            return {

                restrict : 'AE',

                templateUrl:'selector.html',

                scope: {

                    name: '=name'

                },

                link: function(scope, element, attrs) {

                    var aryName=scope.name.split(",");

                    scope.names=aryName;

                    scope.remove=function(i){

                        aryName.splice(i,1);

                    };

                    scope.$watch(

                            "names",

                            function (newValue,oldValue) {

                                if(newValue!=oldValue){

                                    scope.name=aryName.join(",");

                                }

                            },true

                    );

                    scope.selectUser=function(){

                        aryName.length = 0;

                        aryName.push("韩信");

                    }

                }

            }

        });

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

        app.controller('ctrl', ['$scope',function($scope){

            $scope.names='自由港,马云,刘强东';

            $scope.getData=function(){

                console.info($scope.names)

            }

        }])

     </script>

</head>

<body ng-controller="ctrl">

    <div  ht-selector  name="names"></div>

    <button ng-click="getData()">获取数据</button>

</body>

</html>

模版URL

<div>

    <span ng-repeat="item in names">

             {{item}}<a class="btn btn-xs  fa-remove"  title="移除该项" ng-click="remove($index)"></a>

    </span>

    <a class="btn btn-sm btn-primary fa-search" ng-click="selectUser()">选择</a>

</div>

在指令中，使用了独立的scope，传入的数据为使用逗号分割的字符串，我们使用了数组进行操作。

这里的技巧是在字符串和数组之间进行转换。

这里使用了指令独立的scope，使用了watch 对数组进行操作，需要注意的是如果监控数组，需要使用深度监控。

ANGULAR 开发用户选择器指令的更多相关文章

  1. 推荐 15 个 Angular.js 应用扩展指令(参考应用)

    几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 ...

  2. Angular开发技巧

    由于之前有幸去参加了ngChina2018开发者大会,听了will保哥分享了Angular开发技巧,自己接触Angular也有差不多快一年的时间了,所以打算对Angular开发中的一些技巧做一个整理 ...

  3. angular开发控制器之间的通信

    一.指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式(单例模式) 二.基于scope继承的方式: 最简单的让控制器之间进行通信的方法 ...

  4. Framework7 + Angular 开发问题解决汇总

    本篇主要汇总一下使用Framework7 + Angular 开发中遇到的一些难点及我的解决方法,以后再遇到会在这里继续更新. 一.页面表格按需加载 情况描述:默认加载10条,在用户上拉页面是再进行下 ...

  5. Angular JS学习之指令

    1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...

  6. 敏捷开发用户故事系列之十一：CSDN博客用户故事分析

    这是敏捷开发用户故事系列的第十一篇.(栏目目录) 经常有人问起有没有完整的用户故事案例.本人在网上找了一下,大约能找到两三篇,但多数只是为了描述用户故事的语法而已,都不涉及用户故事的颗粒度.大量故事的 ...

  7. Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题

    前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器 教程简单,不会的趣闻度娘 3 Visual Studio ...

  8. IOS开发之记录用户登陆状态，ios开发用户登陆

    IOS开发之记录用户登陆状态,ios开发用户登陆 上一篇博客中提到了用CoreData来进行数据的持久化,CoreData的配置和使用步骤还是挺复杂的.但熟悉CoreData的使用流程后,CoreDa ...

  9. Angular开发实践（一）：环境准备及框架搭建

    引言 在工作中引入Angular框架将近一年了,在这一年中不断的踩坑和填坑,当然也学习和积累了很多的知识,包括MVVM框架.前后端分离.前端工程化.SPA优化等等.因此想通过Angular开发实践这系 ...

随机推荐

  1. java中判断用户是否为第一次登陆（在页面上进行控制）

    <%@ page language="java" import="java.util.*" pageEncoding="gbk"%&g ...

  2. js的小随笔

    1.在js中{  }中的块级语句没有独立的作用域 var i = 5;for(; i < 8; i++){ console.log(i); } //输出 5 6 7 //全局设置的变量i在for ...

  3. poj1266Cover an Arc（三角形外接圆）

    链接 求出三角形的外接圆,通过圆心和半径可以知道这个圆的上下左右最远点,分别判断这个四个点跟弧的两端点A,B的关系,假如判断P点,弧内给出点为C,判断PC是否与AB相交即可判断出P是否在弧上. 精度问 ...

  4. spring 好处与优点

    使用Spring有什么好处?(1)Spring能有效地组织你的中间层对象.(2)Spring能消除在许多工程中常见的对Singleton的过多使用.(3)Spring能消除各种各样自定义格式的属性文件 ...

  5. (九)uboot配置编译、源码分析

    一.X210官方uboot配置编译实践1.找到官方移植好的uboot(BSP概念)(1)源头的源代码是uboot官网下载的.这个下载的源代码可能没有你当前使用的开发板的移植,甚至找不到当前开发板使用的 ...

  6. [精品推荐]Android Studio插件整理

    GOOD 现在Android的开发者基本上都使用Android Studio进行开发(如果你还在使用eclipse那也行,毕竟你乐意怎么样都行).使用好Android Studio插件能大量的减少我们 ...

  7. VI打开和编辑多个文件的命令 分屏操作

    VI打开和编辑多个文件的命令 可分两种情况: 1.在同一窗口中打开多个文件: vi file1 file2 file3:n  切换到下一个文件 (n=next):N  切换到上一个文件 2.在不同窗口 ...

  8. JSP HTML error code

    <html> <head> <title>Setting HTTP Status Code</title> </head> <body ...

  9. dede调用文章里的图片

    {dede:arclist row='6' orderby='pubdate' typeid='5' idlist='' channelid='1'} <li><a href='[f ...

  10. 绑定事件 addEventListener

    addEventListener() 方法用于向指定元素添加事件句柄. addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄. 你可以向一个元素添加多个事件句柄. 你可以向 ...