Eckig. Entfernen in einer verschachtelten Direktive mit ng-repeat

Question

Ich bin neu in AngularJS und habe Probleme mit dem Entfernen bestimmter Elemente in einer verschachtelten benutzerdefinierten Direktive mit ng-repeat. Here is my plunker

Ich habe solche Struktur von verschachtelten Richtlinien:

<button ng-click="mc.addCat()">Add Category</button> 

    <category ng-repeat="cat in mc.main.categories"> 
     <ul class="first-level"> 
      {{ $index +1 }}. Category 
      <br> 
      <input type="text" ng-model="mc.main.categories[$index].name"> 
      <button ng-click="cc.removeCat($index)">Del Category</button> 
      <button ng-click="cc.addItem()">Add Item</button> 

      <item ng-repeat="item in cc.cat.items track by item.id"> 
       <li class="second-level"> 
       {{ $parent.$index +1 }}.{{ $index +1 }} 
       <input type="text" ng-model="mc.main.categories[$parent.$index].items[item.id].name"> 
       <button ng-click="ic.removeItem(item)">del</button> 
       </li> 
      </item> 
     </ul> 
    </category> 

Hinzufügen und Entfernen von Kategorien funktioniert wie ich brauche, und die übergeordneten Modell Updates. Wenn ich jedoch etwas in das Elementfeld eingebe und es dann entferne, bleibt dieses Element im übergeordneten Modell.

Ich denke, mein Problem in verschachtelten Bereichen, können Sie mir sagen, was mache ich falsch?

Danke!

Answer 1

die Löschfunktion in der Richtlinie eine Methode aufrufen sollte das Hauptmodell zu aktualisieren .... Ich habe die Plunker bearbeitet und gegabelt die Bearbeitung ....

`

$scope.$on('updateItems',function(event,index,pindex){ 
     console.log(index); 
     console.log(pindex); 
     var sti = ""+index+""; 
     delete vm.main.categories[pindex].items[sti]; 
}); 

`
Hier ist der Plunker Link plunker

Answer 2

Von dem, was ich aus dem Code zu verstehen ist, wird Ihre neue item hinzugefügt wird und Sie einige information eingeben, die Ihre Eltern Modell aktualisiert ....

<input type="text" ng-model="mc.main.categories[$parent.$index].items[item.id].name"> 

Während die Elemente zu löschen, die Sie löschen die Kopie und das ursprüngliche Objekt.

$scope.$on('delItem', function(event, data){ 
    var items = vm.cat.items; 
    items.splice(items.indexOf(data), 1); 
}); 

Alle unten Funktion in der Kategorie scheint nicht zu funktionieren ..

vm.cat = { 
    items: [{ 
     id: 0, 
     name: '' 
    }] 
}; 
vm.itemId = 0; 
vm.addItem = function() { 
    vm.itemId = vm.itemId + 1; 
    var item = { 
     id: vm.itemId, 
     name: '' 
    }; 
    vm.cat.items.push(item); 
}; 
$scope.$on('delItem', function(event, data) { 
    var items = vm.cat.items; 
    items.splice(items.indexOf(data), 1); 
});