Ciri pengikatan dua hala AngularJS sememangnya sangat berguna, tetapi saya menghadapi beberapa masalah dalam penggunaan sebenar: Saya mula-mula menggunakan ng-repeat untuk memaparkan data berulang kali (item dalam datas), dan kemudian sediakan fungsi pengubahsuaian dalam kotak dialog modal yang berkaitan (mengikat item yang sepadan dengan borang modal menggunakan model ng), tetapi disebabkan pengikatan dua hala, walaupun butang simpan tidak diklik, dalam dialog kotak Pengubahsuaian juga akan menjejaskan data paparan pada halaman dalam masa nyata, yang akan menjejaskan pengalaman Adakah terdapat penyelesaian yang baik? Saya juga cuba menggunakan pembolehubah perantaraan dalam js untuk menyimpan data yang tidak diubah suai, tetapi apabila item itu berubah, pembolehubah perantaraan juga berubah.
Kod berkaitan
html:
<p ng-repeat="item in data">
{{item.name}}
{{item.age}}
</p>
<a data-toggle="modal" data-target="#mySettingModal{{item.id}}" ng-click="fresh(item)">modify</a>
<p class="modal fade" id="mySettingModal{{item.id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<p class="modal-dialog" style="z-index: 1050">
<form name="form">
<p class="form-group">
<label for="name" class="control-label">名称:</label>
<input type="text" class="form-control" id="name" ng-model="item.name" />
</p>
</form>
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="reset()">Close</button>
<button type="button" class="btn btn-primary" ng-click="updateSetting(item)">Save changes</button>
</p>
</p>
JS:
$http.get("/").success(function(data) {
$scope.data = data;
var interItem;
$scope.fresh = function(item) {
interItem = item;
console.log(interItem);
};
$scope.reset = function() {
console.log(interItem);
}
});
angular.copy(item)
Salinan objek harus digunakan dalam modal Selepas pengguna mengklik untuk mengesahkan, salinan yang diubah suai harus menulis ganti data asal.
Sebab untuk menggunakan
angualr.copy
ialah ia menyalin objek secara mendalam Dengan hanya memberikan rujukan objek kepada pembolehubah lain tidak akan mencapai kesan yang anda inginkan.Ini ialah penerangan kaedah salin dalam dokumentasi sudut
https://docs.angularjs.org/api/ng/function/angular.copy