Problèmes rencontrés par angulairejs lors de l'utilisation de ng-model dans ng-repeat

Problèmes rencontrés par angulairejs lors de l'utilisation de ng-model dans ng-repeat_AngularJS

WBOY

Libérer： 2016-05-16 15:19:05

original

1248 Les gens l'ont consulté

Il existe de nombreux problèmes lors de l'utilisation de ng-model dans ng-repeat. Certaines personnes constatent qu'elles ne peuvent pas obtenir le contenu des données liées, et certaines personnes rencontrent que lorsque le contenu des données liées est modifié, tout le contenu généré par la boucle change. ensemble. . J'ai également rencontré le problème ci-dessus pendant le développement, mais après l'avoir résolu, je n'ai pas pu rétablir la situation. Je ne peux que brièvement présenter comment résoudre la situation où il ne peut pas être obtenu.

Par exemple :

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>

Copier après la connexion

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>

Copier après la connexion

C'est une fonction très simple. Vous souhaitez obtenir le contenu des données actuellement sélectionnées lorsque vous cliquez sur le bouton Modifier. Cependant, vous constaterez qu'écrire de cette façon ne peut être qu'indéfini à ce stade, certaines personnes le proposeront. que p peut être attribué à un objet, via la méthode Key: value pour enregistrer chaque sélection

$scope.p={};

Copier après la connexion

Ce n'est en effet pas un problème, mais il y aura un nouveau problème, c'est-à-dire que tant qu'un élément est modifié, tout le contenu sera modifié ensemble. Alors, existe-t-il une meilleure façon ?

Juste un petit changement

html :

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

Copier après la connexion

js :

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

Copier après la connexion

Ce n'est qu'un exemple simple. Si vous rencontrez d'autres problèmes lors de l'utilisation réelle, vous pouvez laisser un message dans les commentaires.