AngularJS用户选择器指令实例分析
本文实例分析了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实践之使用NgModelController进行数据绑定
大家都知道AngularJS中的指令是其尤为复杂的一个部分,但是这也是其比较好玩的地方。这篇文章我们就来说一说如何在我们自定义的指令中,利用ngModel的controller来做双向数据绑定,本文对大家学习AngularJS具有一定的参考借鉴价值,有需要的朋友们可以参考借鉴。2016-10-10Angular4集成ng2-file-upload的上传组件
本篇文章主要介绍了Angular4集成ng2-file-upload的上传组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-03-03详解AngularJs中$sce与$sceDelegate上下文转义服务
这篇文章给大家详细介绍了AngularJs提供的严格上下文转义服务$sce与$sceDelegate,文中介绍的很详细,有需要的朋友们可以参考借鉴。2016-09-09Angular angular-file-upload文件上传的示例代码
这篇文章主要介绍了Angular angular-file-upload文件上传的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-08-08
最新评论