AngularJS用户选择器指令实例分析


Posted in Javascript onNovember 04, 2016

本文实例分析了AngularJS用户选择器指令。分享给大家供大家参考,具体如下:

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

用户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 对数组进行操作,需要注意的是如果监控数组,需要使用深度监控。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 Javascript
详解Angular-Cli中引用第三方库
May 21 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
js module大战
Apr 19 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 #Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 #Javascript
AngularJS中watch监听用法分析
Nov 04 #Javascript
AngularJS中的DOM操作用法分析
Nov 04 #Javascript
JS对大量数据进行多重过滤的方法
Nov 04 #Javascript
AngularJS模板加载用法详解
Nov 04 #Javascript
jQuery 遍历map()方法详解
Nov 04 #Javascript
You might like
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
聊天室php&amp;mysql(五)
2006/10/09 PHP
PHP strtotime函数详解
2009/12/18 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
原生js实现addClass,removeClass,hasClass方法
2016/04/27 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
使用python实现knn算法
2017/12/20 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
Python-openCV开运算实例
2020/07/05 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
如何定义一个可复用的服务
2014/09/30 面试题
租车协议书范本
2014/04/22 职场文书
公务员个人年终总结
2015/02/12 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
Python 数据可视化之Seaborn详解
2021/11/02 Python
Python jiaba库的使用详解
2021/11/23 Python