AngularJS用户选择器指令实例分析

时间：2021-05-28

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章