本文實(shí)例分析了AngularJS用戶選擇器指令。分享給大家供大家參考，具體如下：
在開發(fā)表單時(shí)，我們需要使用經(jīng)常需要使用到用戶選擇器，用戶的數(shù)據(jù)一般使用如下方式存儲(chǔ)：
用戶1,用戶2,用戶3
我們可以使用angular指令實(shí)現(xiàn)選擇器。
<!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='自由港,馬云,劉強(qiáng)東'; $scope.getData=function(){ console.info($scope.names) } }]) </script></head><body ng-controller="ctrl"> <div ht-selector name="names"></div> <button ng-click="getData()">獲取數(shù)據(jù)</button></body></html>模版URL
<div> <span ng-repeat="item in names"> {{item}}<a class="btn btn-xs fa-remove" title="移除該項(xiàng)" ng-click="remove($index)"></a> </span> <a class="btn btn-sm btn-primary fa-search" ng-click="selectUser()">選擇</a></div>在指令中，使用了獨(dú)立的scope，傳入的數(shù)據(jù)為使用逗號(hào)分割的字符串，我們使用了數(shù)組進(jìn)行操作。
這里的技巧是在字符串和數(shù)組之間進(jìn)行轉(zhuǎn)換。
這里使用了指令獨(dú)立的scope，使用了watch 對(duì)數(shù)組進(jìn)行操作，需要注意的是如果監(jiān)控?cái)?shù)組，需要使用深度監(jiān)控。
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
