AngularJS - 如何访问嵌套ng-repeat中的数组

I have a recursive array in js:

我在js中有一个递归数组:

[{
  type: 'cond',
  conditionId: 1,
  conditions: undefined
},
{
  type: 'cond',
  conditionId: 2,
  conditions: undefined
},
{
  type: 'group',
  conditionId: undefined,
  conditions: [{
      type: 'cond',
      conditionId: 3,
      conditions: undefined
    },
    {
      type: 'cond',
      conditionId: 4,
      conditions: undefined
    }]
}]

It is displayed in AngularJS using ng-repeat recursively with inline template:

它使用ng-repeat递归显示在AngularJS中,并使用内联模板:

<script type="text/ng-template" id="recursive_template.html">
<div> some logic </div>
        <div ng-repeat="cond in cond.conditions" ng-include="'recursive_template.html'"></div>
  <div> some more logic  </div>
</script>

<div ng-controller="EditRulesController">
  <div ng-repeat="cond in conditions" ng-include="'recursive_template.html'" class="row">
  </div>
</div>

Everything works fine. Now I want to delete one item from inner ng-repeat. I can get the index of the item that I click on(to delete) with $index, also the object cond as parameter on ng-click. I can also access $parent but it points to the root of the object...

一切正常。现在我想从内部ng-repeat中删除一个项目。我可以使用$ index获取我单击(删除)项目的索引,也可以将对象cond作为ng-click上的参数。我也可以访问$ parent但它指向对象的根...

How to access the inner array without manually search through the whole conditions array recursively? Its strange that you can easily access the index of the inner array but not the actual array instance.

如何在不手动搜索整个条件数组的情况下访问内部数组?奇怪的是,您可以轻松访问内部数组的索引,但不能访问实际的数组实例。

And any one advice on this issue? Thank you..

关于这个问题的任何一个建议?谢谢..

EDIT 21/03/2016

Before the accepted answer, the 'brute-force' version is implemented like this:

在接受答案之前,'暴力'版本实现如下:

        $scope.deleteConditionClick = function (id) {
            deleteCondition($scope.conditions, id);
        };

        function deleteCondition(conditions, id) {

            var conds = conditions;
            if (conds) {
                for (var i = 0; i < conds.length; i++) {
                    if (conds[i].type === 'cond') {
                        if (conds[i].conditionId === id) {
                            conds.splice(i, 1);
                            return true;
                        }
                    } else if (conds[i].type === 'group') {

                        deleteCondition(conds[i].conditions, id);
                    }
                }
            }
        }

I hope it will help others with similar problem.

我希望它能帮助其他有类似问题的人。

3 个解决方案

#1

Have you tried setting you delete action to be ng-click="cond=undefined"? This would empty the deleted condition. You could then use ng-show/ng-if to control visibility in the view.

您是否尝试将删除操作设置为ng-click =“cond = undefined”?这将清空已删除的条件。然后,您可以使用ng-show / ng-if来控制视图中的可见性。

#2

This is how I grab items with multiple indexes:

这就是我抓取多个索引的项目:

<div ng-repeat="x in outerArray" ng-init="outerIndex = $index">
  <div ng-repeat="y in innerArray">
    {{ innerArray[outerIndex] }}
  </div>
</div>

I think this is what you were asking? I hope it helps.

我想这就是你问的问题?我希望它有所帮助。

#3

You can pass the parent array and the object as parameters (eg.: ng-click="delete(conditions, cond)") and use .indexOf() function to find the index of the object (eg. $scope.delete = function(conditions, cond){index = conditions.indexOf(cond)...})

您可以将父数组和对象作为参数传递(例如:ng-click =“delete(conditions,cond)”)并使用.indexOf()函数来查找对象的索引(例如$ scope.delete = function(conditions,cond){index = conditions.indexOf(cond)...})

#1