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

用户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. const 与 readonly 知多少

    const与readonly 很像,都是将变量声明为只读,且在变量初始化后就不可改写.那么,const与readonly 这两个修饰符到底区别在什么地方呢?其实,这个牵扯出C#语言中两种不同的常量类型 ...

  2. 使用Maven构件Web应用

    一个典型的WAR文件会有如下目录结构: Maven的WEB项目结构: jetty-maven-plugin默认很好地支持了Maven的项目结构.在通常情况下,我们只需要直接在IDE中修改源码,IDE能 ...

  3. oracle 查看锁表情况并处理锁表

    /* *locked *query locked object and analyse reason,kill it * */ select 'alter system kill session '' ...

  4. For Exam (Java常用设计模式) 介绍

    一 创建型模式 工厂模式(Factory): 定义一个用以创建对象的接口 抽象工厂模式(Abstract Factory): 提供一个创建一系列相关或相互依赖对象的接口 单例模式(Singleton) ...

  5. 5.6 a、b交换

    答案:int max = ((a+b)+abs(a-b))/2;

  6. iOS开发之 Xcode svn更新代码后，不能打开.xcodeproj，因为该项目文件不能被解析

    http://www.cfanz.cn/?c=article&a=read&id=41565 解决方法:    1.对.xcodeproj 文件右键,显示包内容 2.双击打开 proj ...

  7. laravel各种路径的获取方法

    若Route中有Route::get('home/test', 'HomeController@index')->name('test'); ①视图中的href跳转 一.<a href=& ...

  8. 免费在线客服QQ_网页接入及使用说明

    首先,注册一个QQ (haha,我觉得也是废话) 到QQ推广的网站设置,生成代码 链接:http://shang.qq.com/v3/widget.html 选择“免费开通”,然后就会看到下图,一般只 ...

  9. CSS3_概述、发展史、模块介绍、与浏览器之间的关系

    一.CSS3概述和CSS3的发展史: 1.css3概述: CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能.    目前主流浏览器chrome.safari. ...

  10. JMX 简介 和 实例

    What is JMX? 10 mins Quick Start JMX Tutorial 这篇文章作为入门,非常清楚