AngularJS用戶選擇器指令實(shí)例分析

更新時(shí)間：2016年11月04日 10:55:54 作者：自由港

這篇文章主要介紹了AngularJS用戶選擇器指令,結(jié)合實(shí)例形式分析了angular指令實(shí)現(xiàn)選擇器功能的具體操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例分析了AngularJS用戶選擇器指令。分享給大家供大家參考，具體如下：

在開(kāi)發(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ì)有所幫助。

您可能感興趣的文章: