我在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
}]
}]
它在 AngularJS 中使用 ng-repeat 递归地显示和内联模板:
<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>
一切正常。现在我想从内部 ng-repeat中删除一个项目。我可以使用$index获取我单击(删除)的项目的索引,也可以获取对象 cond 作为 ng-click 的参数。我也可以访问$parent但它指向对象的根目录......
如何在不手动递归搜索整个条件数组的情况下访问内部数组?奇怪的是,您可以轻松访问内部数组的索引,但不能访问实际的数组实例。
关于这个问题有什么建议吗?谢谢。。
编辑 21/03/2016
在接受的答案之前,"蛮力"版本是这样实现的:
$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);
}
}
}
}
我希望它能帮助其他有类似问题的其他人。
您是否尝试过将删除操作设置为ng-click="cond=undefined"
?这将清空已删除的条件。然后,您可以使用 ng-show/ng-if 来控制视图中的可见性。
这就是我抓取具有多个索引的项目的方式:
<div ng-repeat="x in outerArray" ng-init="outerIndex = $index">
<div ng-repeat="y in innerArray">
{{ innerArray[outerIndex] }}
</div>
</div>
我想这就是你要问的?我希望它有所帮助。
您可以将父数组和对象作为参数传递(例如:ng-click="delete(conditions, cond)
"),并使用.indexOf()
函数查找对象的索引(例如。 $scope.delete = function(conditions, cond){index = conditions.indexOf(cond)...}
)