Heim > Artikel > Web-Frontend > Von AngularJS aufgetretene Probleme bei der Verwendung von ng-model in ng-repeat_AngularJS

Von AngularJS aufgetretene Probleme bei der Verwendung von ng-model in ng-repeat_AngularJS

WBOYOriginal: 2016-05-16 15:19:051213Durchsuche

Bei der Verwendung von ng-model in ng-repeat gibt es viele Probleme. Einige Leute stellen fest, dass sie den gebundenen Dateninhalt nicht erhalten können, und andere stellen fest, dass sich der gesamte durch die Schleife generierte Inhalt ändert zusammen. . Ich bin während der Entwicklung auch auf das oben genannte Problem gestoßen, konnte die Situation jedoch nach der Lösung nicht wiederherstellen. Ich kann nur kurz erläutern, wie die Situation gelöst werden kann.

Zum Beispiel:

html:

<body>
<div ng-controller="selectController">
  <div ng-repeat="pop in citylist">
    <select ng-model="p">
      <option value="" style="display:none;">{{pop.pop}}</option>
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
    </select>
    <button ng-click="cs()">ceshi</button>
  </div>
</div>
</body>

js:

<script>
  var app = angular.module('app', []);
  app.controller('selectController', function ($scope) {
    $scope.citylist=[{id:1,pop:"北京"},{id:1,pop:"上海"},{id:1,pop:"广州"}];
    $scope.cs=function(){
      console.log($scope.p);
    }
  })
</script>

Es handelt sich um eine sehr einfache Funktion. Sie möchten den aktuell ausgewählten Dateninhalt abrufen, wenn Sie auf die Schaltfläche „Ändern“ klicken. Sie werden jedoch feststellen, dass das Schreiben auf diese Weise nur undefiniert werden kann dass p einem Objekt zugewiesen werden kann, um jede Auswahl über die Key:-Wert-Methode zu speichern

$scope.p={};

Das ist zwar kein Problem, aber es wird ein neues Problem geben, das heißt, solange ein Element geändert wird, wird der gesamte Inhalt zusammen geändert. Gibt es also einen besseren Weg?

Nur eine kleine Änderung

html:

<button ng-click="cs(p)">ceshi</button>

js:

 $scope.cs=function(p){
      console.log(p);
    }

Dies ist nur ein einfaches Beispiel. Wenn Sie während der tatsächlichen Verwendung weitere Probleme feststellen, können Sie eine Nachricht in den Kommentaren hinterlassen.

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：AngularJS benutzerdefinierte Attribute von ng-model tag_AngularJSNächster Artikel：AngularJS benutzerdefinierte Attribute von ng-model tag_AngularJS

In Verbindung stehende Artikel

Mehr sehen