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

用户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. 《Linux内核设计的艺术》学习笔记（三）Jcond指令

    参考书籍:<Assembly Language for x86 Processors (7th Edition)> ◆ JMPI指令: JMPI是x86实模式下的段间跳转指令: BOOTS ...

  2. HTML笔记（二） 在HTML中使用CSS

    外部CSS: <head> <link rel="stylesheet" type="text/css" href="mystyle ...

  3. Java中的线程池

    package com.cn.gbx; import java.util.Date; import java.util.Random; import java.util.Timer; import j ...

  4. iOS - PassData

    前言 页面传值: 复合传值 单例传值 userDefaults 传值 代理传值 Block/闭包传值 1.复合传值 复合 - 正向传值 1.接收方,头文件中创建可存放传递值的属性变量 2.发送方,包含 ...

  5. Java中List Set Map 是否有序等总结

    1.Collection List Set Map 区别记忆 这些都代表了Java中的集合,这里主要从其元素是否有序,是否可重复来进行区别记忆,以便恰当地使用,当然还存在同步方面的差异,见上一篇相关文 ...

  6. NYOJ 298 点的变换

    题目链接:298 点的变换 这题放在矩阵快速幂里,我一开始想不透它是怎么和矩阵搭上边的,然后写了个暴力的果然超时,上网看了题解后,发现竟然能够构造一些精巧的矩阵来处理,不得不说实在太强大了! http ...

  7. for循环与for in循环

    json是js里的一种数据格式.var obj={a:15,b:8,c:12} json数组对象 var arr=[15,8,12]; 数组alert(obj.a); ---15alert(obj[' ...

  8. goLang文件遍历

    package main import (  "fmt"  "io/ioutil"  "os"  "path/filepath&q ...

  9. Python装饰模式实现源码分享

    1.一般来说,通过继承可以获得父类的属性,还可以通过重载修改其方法. 2.装饰模式可以不以继承的方式而动态地修改类的方法. 3.装饰模式可以不以继承的方式而返回一个被修改的类. 4.基本实现 程序演示 ...

  10. 深入理解JVM虚拟机-2垃圾收集器

    这里讨论的收集器基于JDK 1.7 Update 14之后的HotSpot虚拟机. 如果两个收集器之间存在连线,说明可以搭配使用.虚拟机所处的区域,则表示它是属于新生代收集器还是年老代收集器.在这里我 ...