cari

Rumah  >  Artikel  >  hujung hadapan web  >  Masalah yang dihadapi oleh angularjs apabila menggunakan ng-model dalam ng-repeat_AngularJS

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

WBOY
WBOYasal
2016-05-16 15:19:051226semak imbas

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>

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>

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

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>

js:

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

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：atribut tersuai angularjs bagi ng-model tag_AngularJSArtikel seterusnya：atribut tersuai angularjs bagi ng-model tag_AngularJS

Artikel berkaitan

Lihat lagi