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

用户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. 详解.NET异步

    在说到异步前,先来理一下几个容易混淆的概念,并行.多线程.异步. 并行,一般指并行计算,是说同一时刻有多条指令同时被执行,这些指令可能执行于同一CPU的多核上,或者多个CPU上,或者多个物理主机甚至多 ...

  2. ZOJ-2338 The Towers of Hanoi Revisited 输出汉诺塔的最优解移动过程

    题意:给定N(1<= N <=64)个盘子和M(4<= M <= 65)根柱子,问把N个盘子从1号柱子移动到M号柱子所需要的最少步数,并且输出移动过程. 分析:设f[i][j] ...

  3. 2013/7/17 HNU_训练赛5

    sgu 542 Gena vs Petya sgu 543 Cafe 题意:有N组人需要被分配到某些固定了人数的桌子上,其中ai表示第i组有多少个人,安排作为需要符合如下安排:某一组的人员不能够单独在 ...

  4. Eclipse使用Jetty（转）

    eclipse 与 jetty 结合的最佳实践 http://www.cnblogs.com/mignet/archive/2011/12/04/eclipse_jetty_perfect_integ ...

  5. C++ ASSERT() 断言机制

    C++ ASSERT() 断言机制 ASSERT()是一个调试程序时经常使用的宏,在程序运行时它计算括号内的表达式,如果表达式为FALSE (0), 程序将报告错误,并终止执行.如果表达式不为0,则继 ...

  6. 11 半联结 & 反联结

    半联结 和 反联结是 oracle 优化器能够选择用来在获取信息时应用的两个密切相关的联结方法(实际上是联结方法的选项) 半联结 IN 的半联结 select /* using in */ depar ...

  7. [转载]VFS—Kernel Space & User Space

    在了解虚拟文件系统之前 , 需要先了解 Kernel Space 和 User Space 的区别 . 二者的差别在于内存使用上安全机制的差异 . kernel 执行时会占据一段系统的内存空间 , 这 ...

  8. Monkey学习（1）环境搭建

    环境搭建: Monkey程序由Android系统自带,需要配置J2SE平台的JDK,还需要配置Android平台的SDK. 1)下载和配置JDK 下载与安装JDK过程省略... 配置JDK环境变量,我 ...

  9. 抓取oschina上面的代码分享python块区下的 标题和对应URL

    # -*- coding=utf-8 -*- import requests,re from lxml import etree import sys reload(sys) sys.setdefau ...

  10. (三)结构体指针、sizeof

    (一)结构体指针定义 今天上班写了一段测试代码,结果在linux下编译出现段错误,刚开始一直找不到原因,后来找了度娘才搞懂了.我先贴出来第一次写的代码以及gcc编译器下报的错误: #include&l ...