Masalah yang dihadapi oleh angularjs apabila menggunakan ng-model dalam ng-repeat

Masalah yang dihadapi oleh angularjs apabila menggunakan ng-model dalam ng-repeat_AngularJS

WBOY

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

asal

1249 orang telah melayarinya

Terdapat banyak masalah apabila menggunakan ng-model dalam ng-repeat Sesetengah orang menghadapi bahawa mereka tidak boleh mendapatkan kandungan data terikat, dan sesetengah orang menghadapi bahawa apabila kandungan data terikat ditukar, semua kandungan yang dihasilkan oleh gelung berubah. bersama. Saya juga menghadapi masalah di atas semasa pembangunan, tetapi selepas menyelesaikannya, saya tidak dapat memulihkan keadaan saya hanya boleh memperkenalkan secara ringkas bagaimana untuk menyelesaikan situasi di mana ia tidak dapat diperoleh.

Contohnya:

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>

Salin selepas log masuk

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>

Salin selepas log masuk

Ia adalah fungsi yang sangat mudah Anda ingin mendapatkan kandungan data yang dipilih pada masa ini apabila anda mengklik butang tukar Walau bagaimanapun, anda akan mendapati bahawa penulisan dengan cara ini hanya boleh menjadi tidak ditentukan bahawa p boleh diberikan kepada objek, melalui kaedah nilai Key: untuk menyimpan setiap pilihan

$scope.p={};

Salin selepas log masuk

Ini memang tiada masalah, tetapi akan ada masalah baru, iaitu selagi satu item ditukar, semua kandungan akan diubah bersama-sama Jadi adakah cara yang lebih baik?

Perubahan kecil sahaja

html:

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

Salin selepas log masuk

js:

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

Salin selepas log masuk

Ini hanyalah contoh mudah Jika anda mendapati sebarang masalah lain semasa penggunaan sebenar, anda boleh meninggalkan mesej dalam komen.