[英]ng-include and ng-repeat - remove child
I'm probably just stroking out, but I'm having trouble with the following little piece of code. 我可能只是在抚摸,但我遇到了以下一小段代码的问题。 I've got nested ng-repeats and ng-includes and want to remove an item from an arbitrary level of nesting. 我有嵌套的ng-repeats和ng-includes,想要从任意级别的嵌套中删除一个项目。 Sooo... SOOO ...
<div ng-repeat="item in List" ng-include="'item.html'">
</div>
item.html item.html
<div>
<h1>{{ item.title }}</h1>
<div ng-repeat="item in item.List" ng-include="'item.html'"></div>
<button ng-click="removeItem(item)">Remove me!</button>
</div>
Obviously if I could access the parent's List
array I could splice'r out based on the index, but I'm having serious brain fog about how to access that parent object. 显然,如果我可以访问父类的List
数组,我可以根据索引拼接出来,但我对如何访问该父对象有严重的大脑迷雾。 Any idea how I could pass the parent into the ng-include along with the item
? 知道如何将父项传递给ng-include以及item
吗?
Any idea how I could pass the parent into the ng-include along with the item? 知道如何将父项传递给ng-include以及项目吗?
I think to pass parent to child will cause to code complexibility and hard maintenance. 我认为将父母传给孩子会导致代码复杂性和难以维护。 I also belaive it can effect on performance when we talk about big data. 我还说,当我们谈论大数据时,它会对性能产生影响。 You don't use nested directive with isolate scope so I would use other approach to remove node from nested tree based on unique value ae: 您不使用具有隔离范围的嵌套指令,因此我将使用其他方法根据唯一值ae从嵌套树中删除节点:
function removeFromTree(parent, childNameToRemove){
console.log(parent);
parent.nodes = parent.nodes.filter(function(child){
return child.name !== childNameToRemove;
}).map(function(child){
return removeFromTree(child, childNameToRemove);
});
return parent;
}
$scope.removeItem = function(item){
$scope.displayTree[0] = removeFromTree( $scope.displayTree[0], item.name);
}
HTML HTML
<div ng-controller="DialogDemoCtrl">
<div class="span5 article-tree">
<div ng-style="{'overflow': 'auto'}">
<script type="text/ng-template" id="tree_item_renderer">
<span>
{{showNode(data)}}
</span>
<button ng-click="removeItem(data)">Remove me!</button>
<li ng-repeat="data in data.nodes" class="parent_li" ng-include="'tree_item_renderer'" tree-node></li>
</ul>
</script>
<div class="tree well">
<ul>
<li ng-repeat="data in displayTree" ng-include="'tree_item_renderer'"></li>
</ul>
</div>
</div>
</div>
</div>
JS JS
angular.module('plunker', ['ui.bootstrap'])
.controller('DialogDemoCtrl', function ($scope, $http) {
buildEmptyTree();
function removeFromTree(parent, childNameToRemove){
console.log(parent);
parent.nodes = parent.nodes.filter(function(child){
return child.name !== childNameToRemove;
}).map(function(child){
return removeFromTree(child, childNameToRemove);
});
return parent;
}
$scope.removeItem = function(item){
$scope.displayTree[0] = removeFromTree( $scope.displayTree[0], item.name);
}
function buildEmptyTree() {
$scope.displayTree =
[{
"name": "Root",
"type_name": "Node",
"show": true,
"nodes": [{
"name": "Loose",
"group_name": "Node-1",
"show": true,
"nodes": [{
"name": "Node-1-1",
"device_name": "Node-1-1",
"show": true,
"nodes": []
}, {
"name": "Node-1-2",
"device_name": "Node-1-2",
"show": true,
"nodes": []
}, {
"name": "Node-1-3",
"device_name": "Node-1-3",
"show": true,
"nodes": []
}]
}, {
"name": "God",
"group_name": "Node-2",
"show": true,
"nodes": [{
"name": "Vadar",
"device_name": "Node-2-1",
"show": true,
"nodes": []
}]
}, {
"name": "Borg",
"group_name": "Node-3",
"show": true,
"nodes": []
}, {
"name": "Fess",
"group_name": "Node-4",
"show": true,
"nodes": []
}]
}];
[{
"name": "Android",
"type_name": "Android",
"icon": "icon-android icon-3",
"show": true,
"nodes": []
}];
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.