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

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

WBOY

Freigeben： 2016-05-16 15:19:05

Original

1249 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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={};

Nach dem Login kopieren

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>

Nach dem Login kopieren

js:

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

Nach dem Login kopieren

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.