AngularJS用户选择器指令实例分析  更新时间:2016年11月04日 10:55:54   作者:自由港   这篇文章主要介绍了AngularJS用户选择器指令,结合实例形式分析了angular指令实现选择器功能的具体操作步骤与相关实现技巧,需要的朋友可以参考下 本文实例分析了AngularJS用户选择器指令。分享给大家供大家参考,具体如下: 在开发表单时,我们需要使用经常需要使用到用户选择器,用户的数据一般使用如下方式存储: 用户1,用户2,用户3 我们可以使用angular指令实现选择器。 获取数据 模版URL {{item}} 选择 在指令中,使用了独立的scope,传入的数据为使用逗号分割的字符串,我们使用了数组进行操作。 这里的技巧是在字符串和数组之间进行转换。 这里使用了指令独立的scope,使用了watch 对数组进行操作,需要注意的是如果监控数组,需要使用深度监控。 希望本文所述对大家AngularJS程序设计有所帮助。 您可能感兴趣的文章: Angularjs自定义指令实现三级联动 选择地理位置 AngularJS Select(选择框)使用详解 AngularJS入门教程之Select(选择框)详解 AngularJS动态菜单操作指令 AngularJS 单选框及多选框的双向动态绑定 AngularJS实现给动态生成的元素绑定事件的方法 AngularJS单选框及多选框实现双向动态绑定 AngularJs动态加载模块和依赖注入详解 AngularJS+bootstrap实现动态选择商品功能示例 AngularJS 选择器 指令 相关文章 Angular HMR(热模块替换)功能实现方法 本篇文章主要介绍了Angular HMR(热模块替换)功能实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-04-04 详解AngularJs中$resource和restfu服务端数据交互 之前小编和大家分享过使用$http同服务器进行通信,但是功能上比较简单,angularjs还提供了另外一个可选的服务$resource,使用它可以非常方便的同支持restful的服务单进行数据交互。下面来一起看看吧。 2016-09-09 Angularjs 手写日历的实现代码(不用插件) 本篇文章介绍了Angularjs 手写日历的实现代码(不用插件),整理了详细的代码,非常具有实用价值,需要的朋友可以参考下 2017-10-10 angular动态删除ng-repaeat添加的dom节点的方法 本篇文章主要介绍了angular动态删除ng-repaeat添加的dom节点的方法,非常具有实用价值,需要的朋友可以参考下 2017-07-07 简介AngularJS中使用factory和service的方法 这篇文章主要简单介绍了AngularJS中使用factory和service的方法,主要针对自定义工厂和服务的创建来讲,需要的朋友可以参考下 2015-06-06 Angular 4依赖注入学习教程之InjectToken的使用(八) 这篇文章主要给大家介绍了关于Angular 4依赖注入之InjectToken使用的相关资料,文中介绍的非常详细,对大家学习或者使用Angular4具有一定的参考学习价值,需要的朋友们下面来跟着小编一起学习学习吧。 2017-06-06 AngularJS自定义指令之复制指令实现方法 这篇文章主要介绍了AngularJS自定义指令之复制指令实现方法,结合完整实例形式分析了AngularJS自定义指令实现复制功能的相关操作技巧,需要的朋友可以参考下 2017-05-05 Angular在一个页面中使用两个ng-app的方法 这篇文章主要介绍了Angular在一个页面中使用两个ng-app的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下 2017-02-02 使用Angular material主题定义自己的组件库的配色体系 这篇文章主要介绍了使用Angular material主题定义自己的组件库的配色体系的相关知识,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 2019-09-09 angularjs实现天气预报功能 这篇文章主要为大家详细介绍了angularjs实现天气预报功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-10-10 最新评论

本文实例分析了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程序设计有所帮助。

您可能感兴趣的文章:

  • Angularjs自定义指令实现三级联动 选择地理位置
  • AngularJS Select(选择框)使用详解
  • AngularJS入门教程之Select(选择框)详解
  • AngularJS动态菜单操作指令
  • AngularJS 单选框及多选框的双向动态绑定
  • AngularJS实现给动态生成的元素绑定事件的方法
  • AngularJS单选框及多选框实现双向动态绑定
  • AngularJs动态加载模块和依赖注入详解
  • AngularJS+bootstrap实现动态选择商品功能示例
张贴在3