Heim > Web-Frontend > js-Tutorial > Hauptteil

Beispielanalyse der AngularJS-Benutzerauswahldirektive

高洛峰
Freigeben: 2016-12-07 15:59:34
Original
1037 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.


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!