角。使用 ng-repeat 在嵌套指令中删除

Question

我是 AngularJS 新手，在使用 ng-repeat 删除嵌套自定义指令中的某些元素时遇到问题。 Here is my plunker

我有这样的嵌套指令结构：

<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>

根据需要添加和删除类别，并且父模型会更新。 但是，当我在项目字段中输入内容，然后将其删除时，该项目仍保留在父模型中。

我认为我的问题在于嵌套范围，你能告诉我我做错了什么吗？

谢谢！

Answer 1

指令中的删除函数应该调用一个方法来更新主模型....我已经编辑了 plunker 并分叉了编辑....

`

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

`
这是plunker链接plunker

Answer 2

根据我从您的代码中了解到的是，您的新 item 正在添加，您正在输入一些 information 正在更新您的父模型...。

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

在删除项目时，您正在删除副本和原始对象。

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

类别中的所有以下功能似乎都不起作用..

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);
});