angular.js - Pilihan pengikatan dua hala AngularJS
天蓬老师
天蓬老师 2017-05-15 16:52:05
0
1
660

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);
  }
});
天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

membalas semua(1)
过去多啦不再A梦

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

Mencipta salinan sumber yang mendalam, yang sepatutnya menjadi objek atau tatasusunan.

https://docs.angularjs.org/api/ng/function/angular.copy

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan