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

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

2 个答案: