如何从javascript

时间：2017-08-17 12:33:56

标签： javascript angularjs

Plunker

我想从列表中删除一行。最初的代码是

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

    }

2 个答案:

答案 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;
    }
}

＆＃13;
＆＃13; 
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;
＆＃13;
＆＃13;

答案 1 :(得分：0)

试试这个，将目标元素替换为＆＃34; REMOVED＆＃34;，将其从生产中的拼接功能中删除

＆＃13;
＆＃13; 
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;
＆＃13;
＆＃13;

相关问题
最新问题