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

用户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. Docker-网络基础配置

    从外部访问容器 指定容器端口随机映射主机端口 [root@wls12c /]$ docker run -p -d --name web tomcat /bin/bash -c /root/apache ...

  2. caffe的data_reader.cpp分析一下干了点什么

    首先说明:下面的内容不一定对 类body: 变量:LayerParameter param_ :它里面放的是:body传进来的layerparameter的参数: BlockingQueue<s ...

  3. css 的小细节，小总结

    CSS的一些零碎总结 1.CSS 伪元素用于向某些选择器设置特殊效果(用来当作一个东西的,跟一个元素差不多,但不是元素). ① :frist-line伪元素:用于向文本首行设置特殊样式,但是只能用于块 ...

  4. iOS——为Xcode编译POCO C++静态库

    一.POCO C++ library简介 POCO C++ library是一个C++编写的跨平台库,主要实现网络连接.数据库管理以及服务器,适用于跨平台.嵌入式. 二.为Xcode编译POCO C+ ...

  5. laravel captcha

    https://packagist.org/packages/gregwar/captcha

  6. OpenGL的几何变换2之内观察立方体

    我想实现的一个场景是:一个立方体,相机的坐标在立方体的中心点,相机不变,立方体旋转,可以站在立方体中心点查看立方体内部. 实际上就是立方体图像,这是在全景图片当作比较简单的方式,画面不会变形和扭曲,但 ...

  7. Linux计划任务入门详解

    Linux操作系统定时任务系统 Cron 入门 cron是一个linux下的定时执行工具,可以在无需人工干预的情况下运行作业.由于Cron 是Linux的内置服务,但它不自动起来,可以用以下的方法启动 ...

  8. Gitweb 安装与配置

    gitweb 可以通过搭建git服务器将代码保存在git服务器上,多个开发者可以从服务器上clone代码,也可以各自维护一份本地代码,在本地更新之后可以提交到git服务器上,提高开发效率.     g ...

  9. program testy data

    做项目得用数据吧,拿去.... 1.Data.gov搜索   美国政府去年承诺使所有政府数据都能在网上免费获得.这个网站是第一阶段,作为一个门户网站,囊括了从气候到犯罪的一切惊人的信息.   2. 美 ...

  10. Java集合框架：HashMap

    转载: Java集合框架:HashMap Java集合框架概述   Java集合框架无论是在工作.学习.面试中都会经常涉及到,相信各位也并不陌生,其强大也不用多说,博主最近翻阅java集合框架的源码以 ...