我想从列表中删除一行。最初的代码是
var newArray = _.filter($scope.componentList, function(arrayItem) {
return rowId !== arrayItem.rowId;
});
$scope.componentList = newArray;
此过滤器将执行的操作是,如果返回值为true,则过滤器包含该对象,否则将删除该对象。现在我只想为父项和子项返回相同的内容
此处rowId
是此功能的输入。
在上面的$scope.componentList = newArray;
行中,我们将获得该rowId
mached将被删除的对象。其余的rowId将出现在该列表中。好的
return rowId !== arrayItem.rowId;
在这一行中,什么都会返回true,那些将在newArray中存在。
但现在格式已经改变了。现在格式就像下面那样。
[
{
"revision": 0,
"componentName": "abc",
"componentIdentification": "abc",
"componentType": "1",
"componentState": "1",
"componentUrl": null,
"componentId": "214",
"rowId": "3",
"items": [
{
"revision": 0,
"componentName": "efg",
"componentIdentification": "efg",
"componentType": "2",
"componentState": "1",
"componentUrl": null,
"componentId": "215",
"rowId": "3.1",
"items": null,
"componentStateId": 0,
"ctastatus": 0,
"actionId": "16",
"actionToPerform": "1"
}
],
"componentStateId": 0,
"ctastatus": 0,
"actionId": "37",
"actionToPerform": "1"
},
{
"revision": 0,
"componentName": "hij",
"componentIdentification": "hij",
"componentType": "1",
"componentState": "1",
"componentUrl": null,
"componentId": "206",
"rowId": "1",
"items": [
{
"revision": 0,
"componentName": "klm",
"componentIdentification": "klm",
"componentType": "2",
"componentState": "1",
"componentUrl": null,
"componentId": "207",
"rowId": "1.1",
"items": [
{
"revision": 0,
"componentName": "nop",
"componentIdentification": "nop",
"componentType": "2",
"componentState": "1",
"componentUrl": null,
"componentId": "208",
"rowId": "1.1.1",
"items": [
{
"revision": 0,
"componentName": "qrs",
"componentIdentification": "qrs",
"componentType": "2",
"componentState": "1",
"componentUrl": null,
"componentId": "209",
"rowId": "1.1.1.1",
"items": null,
"componentStateId": 0,
"ctastatus": 0,
"actionId": "26",
"actionToPerform": "1"
},
{
"revision": 0,
"componentName": "tuv",
"componentIdentification": "tuv",
"componentType": "2",
"componentState": "1",
"componentUrl": null,
"componentId": "210",
"rowId": "1.1.1.2",
"items": null,
"componentStateId": 0,
"ctastatus": 0,
"actionId": "5",
"actionToPerform": "1"
}
],
"componentStateId": 0,
"ctastatus": 0,
"actionId": "25",
"actionToPerform": "1"
}
],
"componentStateId": 0,
"ctastatus": 0,
"actionId": "1",
"actionToPerform": "1"
}
],
"componentStateId": 0,
"ctastatus": 0,
"actionId": "37",
"actionToPerform": "1"
},
{
"revision": 0,
"componentName": "wxy",
"componentIdentification": "wxy",
"componentType": "1",
"componentState": "1",
"componentUrl": null,
"componentId": "211",
"rowId": "2",
"items": [
{
"revision": 0,
"componentName": "zab",
"componentIdentification": "zab",
"componentType": "2",
"componentState": "1",
"componentUrl": null,
"componentId": "212",
"rowId": "2.1",
"items": null,
"componentStateId": 0,
"ctastatus": 0,
"actionId": "7",
"actionToPerform": "1"
},
{
"revision": 0,
"componentName": "cde",
"componentIdentification": "cde",
"componentType": "2",
"componentState": "1",
"componentUrl": null,
"componentId": "213",
"rowId": "2.2",
"items": null,
"componentStateId": 0,
"ctastatus": 0,
"actionId": "12",
"actionToPerform": "1"
}
],
"componentStateId": 0,
"ctastatus": 0,
"actionId": "37",
"actionToPerform": "1"
}
]
现在,使用items[]
数组的一行与另一行之间存在父子关系。所以我尝试编写如下代码,但它不起作用。
方法调用: -
var newArray = $scope.isRowIdExist($scope.componentList,rowId);
方式
$scope.isRowIdExist = function(list,rowId) {
var newArray = _.filter(list, function(arrayItem) {
if(rowId != arrayItem.rowId){
if (arrayItem.items && arrayItem.items.length > 0){
$scope.isRowIdExist(arrayItem.items,rowId); // method calling itself
}
}
return rowId !== arrayItem.rowId;
});
}
答案 0 :(得分:0)
我建议在这种情况下避免过滤。此代码适用于删除父项或子项:
function removeRow(items, rowId) {
for (var i=0; i<items.length; i++) {
var item = items[i];
if (rowId == item.rowId) {
items.splice(i, 1);
} else if (rowId.startsWith(item.rowId)) {
removeRow(item.items, rowId);
}
if (item.items != null && item.items.length == 0) item.items = null;
}
}
var items = [
{
"revision": 0,
"componentName": "abc",
"componentIdentification": "abc",
"componentType": "1",
"componentState": "1",
"componentUrl": null,
"componentId": "214",
"rowId": "3",
"items": [
{
"revision": 0,
"componentName": "efg",
"componentIdentification": "efg",
"componentType": "2",
"componentState": "1",
"componentUrl": null,
"componentId": "215",
"rowId": "3.1",
"items": null,
"componentStateId": 0,
"ctastatus": 0,
"actionId": "16",
"actionToPerform": "1"
}
],
"componentStateId": 0,
"ctastatus": 0,
"actionId": "37",
"actionToPerform": "1"
},
{
"revision": 0,
"componentName": "hij",
"componentIdentification": "hij",
"componentType": "1",
"componentState": "1",
"componentUrl": null,
"componentId": "206",
"rowId": "1",
"items": [
{
"revision": 0,
"componentName": "klm",
"componentIdentification": "klm",
"componentType": "2",
"componentState": "1",
"componentUrl": null,
"componentId": "207",
"rowId": "1.1",
"items": [
{
"revision": 0,
"componentName": "nop",
"componentIdentification": "nop",
"componentType": "2",
"componentState": "1",
"componentUrl": null,
"componentId": "208",
"rowId": "1.1.1",
"items": [
{
"revision": 0,
"componentName": "qrs",
"componentIdentification": "qrs",
"componentType": "2",
"componentState": "1",
"componentUrl": null,
"componentId": "209",
"rowId": "1.1.1.1",
"items": null,
"componentStateId": 0,
"ctastatus": 0,
"actionId": "26",
"actionToPerform": "1"
},
{
"revision": 0,
"componentName": "tuv",
"componentIdentification": "tuv",
"componentType": "2",
"componentState": "1",
"componentUrl": null,
"componentId": "210",
"rowId": "1.1.1.2",
"items": null,
"componentStateId": 0,
"ctastatus": 0,
"actionId": "5",
"actionToPerform": "1"
}
],
"componentStateId": 0,
"ctastatus": 0,
"actionId": "25",
"actionToPerform": "1"
}
],
"componentStateId": 0,
"ctastatus": 0,
"actionId": "1",
"actionToPerform": "1"
}
],
"componentStateId": 0,
"ctastatus": 0,
"actionId": "37",
"actionToPerform": "1"
},
{
"revision": 0,
"componentName": "wxy",
"componentIdentification": "wxy",
"componentType": "1",
"componentState": "1",
"componentUrl": null,
"componentId": "211",
"rowId": "2",
"items": [
{
"revision": 0,
"componentName": "zab",
"componentIdentification": "zab",
"componentType": "2",
"componentState": "1",
"componentUrl": null,
"componentId": "212",
"rowId": "2.1",
"items": null,
"componentStateId": 0,
"ctastatus": 0,
"actionId": "7",
"actionToPerform": "1"
},
{
"revision": 0,
"componentName": "cde",
"componentIdentification": "cde",
"componentType": "2",
"componentState": "1",
"componentUrl": null,
"componentId": "213",
"rowId": "2.2",
"items": null,
"componentStateId": 0,
"ctastatus": 0,
"actionId": "12",
"actionToPerform": "1"
}
],
"componentStateId": 0,
"ctastatus": 0,
"actionId": "37",
"actionToPerform": "1"
}
];
/*
Psuedocode:
Do a fast recursive search for |item.rowId|=|rowId| and delete the one that matches
*/
function removeRow(items, rowId) {
for (var i=0; i<items.length; i++) {
var item = items[i];
if (rowId == item.rowId) {
items.splice(i, 1);
} else if (rowId.startsWith(item.rowId)) {
removeRow(item.items, rowId);
}
if (item.items != null && item.items.length == 0) item.items = null;
}
}
removeRow(items, "1.1.1.1");
console.log(items);
&#13;
答案 1 :(得分:0)
试试这个,将目标元素替换为&#34; REMOVED&#34;,将其从生产中的拼接功能中删除
angular.module("myApp", [])
.controller("ctrl", function($scope){
$scope.data = JSON.parse('[{"revision":0,"componentName":"abc","componentIdentification":"abc","componentType":"1","componentState":"1","componentUrl":null,"componentId":"214","rowId":"3","items":[{"revision":0,"componentName":"efg","componentIdentification":"efg","componentType":"2","componentState":"1","componentUrl":null,"componentId":"215","rowId":"3.1","items":null,"componentStateId":0,"ctastatus":0,"actionId":"16","actionToPerform":"1"}],"componentStateId":0,"ctastatus":0,"actionId":"37","actionToPerform":"1"},{"revision":0,"componentName":"hij","componentIdentification":"hij","componentType":"1","componentState":"1","componentUrl":null,"componentId":"206","rowId":"1","items":[{"revision":0,"componentName":"klm","componentIdentification":"klm","componentType":"2","componentState":"1","componentUrl":null,"componentId":"207","rowId":"1.1","items":[{"revision":0,"componentName":"nop","componentIdentification":"nop","componentType":"2","componentState":"1","componentUrl":null,"componentId":"208","rowId":"1.1.1","items":[{"revision":0,"componentName":"qrs","componentIdentification":"qrs","componentType":"2","componentState":"1","componentUrl":null,"componentId":"209","rowId":"1.1.1.1","items":null,"componentStateId":0,"ctastatus":0,"actionId":"26","actionToPerform":"1"},{"revision":0,"componentName":"tuv","componentIdentification":"tuv","componentType":"2","componentState":"1","componentUrl":null,"componentId":"210","rowId":"1.1.1.2","items":null,"componentStateId":0,"ctastatus":0,"actionId":"5","actionToPerform":"1"}],"componentStateId":0,"ctastatus":0,"actionId":"25","actionToPerform":"1"}],"componentStateId":0,"ctastatus":0,"actionId":"1","actionToPerform":"1"}],"componentStateId":0,"ctastatus":0,"actionId":"37","actionToPerform":"1"},{"revision":0,"componentName":"wxy","componentIdentification":"wxy","componentType":"1","componentState":"1","componentUrl":null,"componentId":"211","rowId":"2","items":[{"revision":0,"componentName":"zab","componentIdentification":"zab","componentType":"2","componentState":"1","componentUrl":null,"componentId":"212","rowId":"2.1","items":null,"componentStateId":0,"ctastatus":0,"actionId":"7","actionToPerform":"1"},{"revision":0,"componentName":"cde","componentIdentification":"cde","componentType":"2","componentState":"1","componentUrl":null,"componentId":"213","rowId":"2.2","items":null,"componentStateId":0,"ctastatus":0,"actionId":"12","actionToPerform":"1"}],"componentStateId":0,"ctastatus":0,"actionId":"37","actionToPerform":"1"}]');
$scope.toDel = "1.1"
$scope.removeElement = function (data, toDel, parent) {
data.forEach(function(row, i) {
if (row.rowId == toDel) {
if (parent) {
parent.items.splice(i, 1, "REMOVED")
} else {
data.splice(i, 1, "REMOVED")
}
} else if (row.items) {
$scope.removeElement(row.items, toDel, row)
}
})
}
$scope.removeElement($scope.data, $scope.toDel, null);
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
<pre>{{data | json}}</pre>
</div>
&#13;