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放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
Vue的Options用法说明
Aug 14 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代码
2007/03/08 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
初识php MVC
2014/09/10 PHP
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
pycharm配置git(图文教程)
2019/08/16 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
方法名是否可以与构造器的名字相同
2012/06/04 面试题
大学生创业感言
2014/01/25 职场文书
《画风》教学反思
2014/04/16 职场文书
水电维修专业推荐信
2014/09/06 职场文书
质量保证书
2015/01/17 职场文书
秋季运动会开幕词
2015/01/28 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
2016年党建工作简报
2015/11/26 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
MySQL中优化SQL语句的方法(show status、explain分析服务器状态信息)
2022/04/09 MySQL