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 学习笔记(三)
Dec 29 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
node.js博客项目开发手记
Mar 16 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 Javascript
微信小程序文章列表功能完整实例
Jun 03 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
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
对PHP语言认识上需要避免的10大误区
2014/06/12 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
javascript基础知识讲解
2017/01/11 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
js实现简单掷骰子效果
2019/10/24 Javascript
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
Python可变参数函数用法实例
2015/07/07 Python
pycharm远程调试openstack代码
2017/11/21 Python
django 发送手机验证码的示例代码
2018/04/25 Python
python 如何上传包到pypi
2020/12/24 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
医院总经理岗位职责
2014/02/04 职场文书
物理力学求职信
2014/02/18 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
分居协议书范本
2014/11/03 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
Python anaconda安装库命令详解
2021/10/16 Python