Bagaimana cara menghapus elemen dari objek di dalam ng-repeat?

Saya mencoba menghapus beberapa elemen dari suatu objek tetapi saya mendapatkan kesalahan, objek ini ada di dalam ng-repeat.

Kesalahan: Duplikat dalam repeater tidak diperbolehkan. Gunakan ekspresi 'lacak menurut' untuk menentukan kunci unik. Pengulang: anak di induk.penerima manfaat, Kunci duplikat: tidak terdefinisi: tidak terdefinisi, Nilai duplikat: tidak terdefinisi

Saya membuat skrip sederhana di plukr: https://plnkr.co/edit/W2C9ML4dEgJzqj6JeqWC?p=preview

Pengendali Saya:

angular
  .module("myApp", [])
  .controller("myCtrl", myCtrl);

  function myCtrl(){
    var vm = this;

    vm.classification = [
        {
          "name": "Favoritos",
          "beneficiaries":[
            {
              "idE": "1",
              "type": "Beneficiarios",
              "name": "Alexander Bueno",
              "selected": false
            },
            {
              "idE": "2",
              "type": "Beneficiarios",
              "name": "Lorena Torrealba",
              "selected": false
            },
            {
              "idE": "3",
              "type": "Beneficiarios",
              "name": "Fabián Pernía",
              "selected": false
            }
          ]
        },
        {
          "name": "Mis cuentas",
          "beneficiaries":[
            {
              "idE": "8",
              "type": "Cuentas",
              "name": "Corriente ...1234",
              "selected": false
            },
            {
              "idE": "9",
              "type": "Cuentas",
              "name": "Corriente ...9854",
              "selected": false
            },
            {
              "idE": "10",
              "type": "Cuentas",
              "name": "Ahorro ...9921",
              "selected": false
            }
          ]
        },
        {
          "name": "Terceros",
          "beneficiaries":[
            {
              "idE": "4",
              "type": "Beneficiarios",
              "name": "Alexander Ramírez",
              "selected": false
            },
            {
              "idE": "5",
              "type": "Beneficiarios",
              "name": "Vicente Delgado",
              "selected": false
            },
            {
              "idE": "6",
              "type": "Beneficiarios",
              "name": "Alexis Rodríguez",
              "selected": false
            },
            {
              "idE": "7",
              "type": "Beneficiarios",
              "name": "Ignacio Bueno",
              "selected": false
            }
          ]
        },
        {
          "name": "Tarjetas",
          "beneficiaries":[
            {
              "idE": "11",
              "name": "Visa ...6987",
              "selected": false
            },
            {
              "idE": "12",
              "name": "MasterCard ...7841",
              "selected": false
            }
          ]
        },
        {
          "name": "Servicios",
          "beneficiaries":[
            {
              "idE": "13",
              "name": "Electricidad de Caracas",
              "selected": false
            },
            {
              "idE": "14",
              "name": "C.A.N.T.V",
              "selected": false
            }
          ]
        }
      ];

    //function to delete elements
    vm.deleteElements = function(){
      for(var parent in vm.classification){
        for(var child in vm.classification[parent].beneficiaries){
          //if an element is selected then it will be deleted
          if(vm.classification[parent].beneficiaries[child].selected)
            //this fails if there are more than one element
            delete vm.classification[parent].beneficiaries[child]
        }
      }
    }
  }

Pandangan ku:

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script data-require="[email protected]" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script data-require="[email protected]" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/idstyle.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="myCtrl as ctrl">
    <h1>Elements</h1>
    <a class="btn btn-danger" ng-click="ctrl.deleteElements();">Delete selected elements</a>

    <div class="well" ng-repeat="parent in ctrl.classification">
      <h3>{{parent.name}}</h3>
      <h5 ng-repeat="child in parent.beneficiaries">
        <input type="checkbox" ng-model="child.selected">{{child.name}}
      </h5>
    </div>

  </body>

</html>

Jadi, apa yang saya lakukan salah?


javascript object loops angularjs
person fablexis    schedule 22.02.2016    source sumber
comment
beneficiaries adalah sebuah array, jadi child in vm.classification[parent].beneficiaries pada awalnya tidak benar. Begitu pula dengan delete vm.classification[parent].beneficiaries[child].   -  person a better oliver    schedule 22.02.2016
comment
Oke, apa bentuk yang benar untuk melakukan itu? Jika saya menambahkan kode track by $index di dalam <h5 ng-repeat="child in parent.beneficiaries> itu berfungsi   -  person fablexis    schedule 22.02.2016

Jawaban (2)


arrow_upward
1
arrow_downward

Menggunakan for ... in untuk mengulang array tidak benar, karena tidak hanya mempertimbangkan elemen array. Juga tidak menghapus elemen array dengan delete. Itu tidak mengubah ukuran array.

Solusi yang cukup sederhana adalah memfilter array:

vm.deleteElements = function(){
  vm.classification.forEach(function (classification) {
    classification.beneficiaries = classification.beneficiaries.filter(function(beneficiary) {
      return !beneficiary.selected;
    });
  });
}

Atau jika browser mendukung ES6:

vm.deleteElements = function(){
  vm.classification.forEach( classification =>
    classification.beneficiaries = classification.beneficiaries.filter(beneficiary => !beneficiary.selected)
  );
}
person a better oliver    schedule 22.02.2016
comment
Jawaban yang bagus! Sangat jelas! Terima kasih! Ini bekerja dengan sangat baik! - person fablexis; 22.02.2016

arrow_upward
1
arrow_downward

Ini meminta Anda untuk memiliki beberapa pengenal unik untuk setiap item di parent.beneficiaries. Berikut adalah halaman Angular di dalamnya. Jika tidak ada id unik Anda dapat mencoba track by $index atau semacamnya. Tapi Anda harus bisa menggunakan ini:

<h5 ng-repeat="child in parent.beneficiaries track by child.idE">

person tenor528    schedule 22.02.2016
comment
dengan ‹h5 ng-repeat=child di parent.beneficiaries dilacak oleh child.idE› tidak berfungsi :( - person fablexis; 22.02.2016
comment
Ini berfungsi jika menggunakan track oleh $index! Terima kasih, tapi saya punya pertanyaan lain, bagaimana cara menghapus entri yang telah dihapus? - person fablexis; 22.02.2016