Heim > Artikel > Web-Frontend > Beispielanalyse der AngularJS-Benutzerauswahldirektive

Beispielanalyse der AngularJS-Benutzerauswahldirektive

高洛峰Original: 2016-12-07 15:59:341006Durchsuche

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>

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>

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.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispiel für die Erstellung eines Objekts mit JSNächster Artikel：Beispiel für die Erstellung eines Objekts mit JS

In Verbindung stehende Artikel

Mehr sehen