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 相关文章推荐
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
JS简单计算器实例
Jan 20 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
webpack4 从零学习常用配置(小结)
May 28 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
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
关于页面优化和伪静态
2009/10/11 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
php通过各种函数判断0和空
2020/07/04 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
实现JavaScript中继承的三种方式
2009/10/16 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
Canvas实现微信红包照片效果
2018/08/21 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
python抓取网页图片并放到指定文件夹
2014/04/24 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
使用python实现学生信息管理系统
2021/02/25 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
Java程序员面试题
2016/09/27 面试题
专项法律服务方案
2014/06/11 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
党章学习心得体会2016
2016/01/14 职场文书
升职自荐书
2019/05/09 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers