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 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
javascript常用的设计模式
Feb 09 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
vue元素实现动画过渡效果
Jul 01 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
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获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
javascript json 新手入门文档
2009/12/03 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
python dlib人脸识别代码实例
2019/04/04 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
python datetime处理时间小结
2020/04/16 Python
python os模块在系统管理中的应用
2020/06/22 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
《蜗牛》教学反思
2014/02/18 职场文书
投标承诺书范本
2014/03/27 职场文书
毕业生工作求职信
2014/06/30 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
授权委托书
2015/01/28 职场文书
郭明义观后感
2015/06/08 职场文书
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB