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 相关文章推荐
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 Javascript
原生js实现吸顶效果
Mar 13 Javascript
关于Vue项目跨平台运行问题的解决方法
Sep 18 Javascript
vue实现直播间点赞飘心效果的示例代码
Sep 20 Javascript
JS数组方法join()用法实例分析
Jan 18 Javascript
微信小程序动态添加和删除组件的现实
Feb 28 Javascript
js实现查询商品案例
Jul 22 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
浅析ThinkPHP中的pathinfo模式和URL重写
2014/01/06 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python分析nignx访问日志脚本分享
2015/02/26 Python
Python读取mp3中ID3信息的方法
2015/03/05 Python
python实现多线程的两种方式
2016/05/22 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
技术总监个人的自我评价范文
2013/12/18 职场文书
书法培训心得体会
2014/01/05 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
电子商务求职信
2014/06/15 职场文书
关于爱国的标语
2014/06/24 职场文书
担保书范本
2015/01/20 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript