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 相关文章推荐
js 页面输出值
Nov 30 Javascript
动态为事件添加js代码示例
Feb 15 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
JQuery 学习笔记 选择器之五
Jul 23 Javascript
让js弹出窗口居前显示的实现方法
Jul 10 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 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
PHP 模板高级篇总结
2006/12/21 PHP
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
jquery dialog键盘事件代码
2010/08/01 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
JS实现div居中示例
2014/04/17 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
实例讲解Python中的私有属性
2014/08/21 Python
Python 中 Meta Classes详解
2016/02/13 Python
python发送邮件功能实现代码
2016/07/15 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
python 实现字符串下标的输出功能
2020/02/13 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
倩碧美国官网:Clinique美国
2016/07/20 全球购物
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
青春无悔演讲稿
2014/05/08 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
校庆团日活动总结
2014/08/28 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
导游欢送词
2015/01/31 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python