Beispielanalyse der AngularJS-Benutzerauswahldirektive-js-Tutorial-php.cn

Beispielanalyse der AngularJS-Benutzerauswahldirektive

高洛峰

Freigeben： 2016-12-07 15:59:34

Original

1005 Leute haben es durchsucht

In diesem Artikel wird die AngularJS-Benutzerauswahlanweisung anhand von Beispielen analysiert. Teilen Sie es allen als Referenz mit. Die Details lauten wie folgt:

Bei der Entwicklung von Formularen müssen wir häufig Benutzerselektoren verwenden. Benutzerdaten werden im Allgemeinen auf folgende Weise gespeichert:

Benutzer 1 , Benutzer 2, Benutzer 3

Wir können die Winkelanweisung verwenden, um den Selektor zu implementieren.

<!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(&#39;htSelector&#39;, function() {
      return {
        restrict : &#39;AE&#39;,
        templateUrl:&#39;selector.html&#39;,
        scope: {
          name: &#39;=name&#39;
        },
        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(&#39;ctrl&#39;, [&#39;$scope&#39;,function($scope){
      $scope.names=&#39;自由港,马云,刘强东&#39;;
      $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>

Nach dem Login kopieren

Vorlagen-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>

Nach dem Login kopieren

Im Befehl wird ein unabhängiger Bereich verwendet und übergeben Die Daten sind eine durch Kommas getrennte Zeichenfolge, und wir verwenden für den Betrieb ein Array.

Der Trick hier besteht darin, zwischen Strings und Arrays zu konvertieren.

Hier wird ein befehlsunabhängiger Bereich verwendet, und zum Betreiben des Arrays wird eine Überwachung verwendet. Beachten Sie, dass Sie bei der Überwachung des Arrays eine detaillierte Überwachung verwenden müssen.