Question

我前几次问过如何从json中更精确地删除项目：Angular remove item from json

它运作良好..现在我遇到了同样的问题，但代码有点不同。总之，我有一个清单。当我点击一个项目时，它会在json中添加它的属性。我想如果我再次点击这个项目，它将从json中删除它的属性。所以，我点击Item1并添加，再次点击Item1并删除。

这是我试过的

myApp.controller("mycontroller", ["$scope", "$http",
    function($scope, $http){
        $scope.getItems = {
    "data": [
        {
            "label": "first",
            "objects": [
                {
                    "name": "firstObj",
                    "attributes": [
                        {
                            "attrname": "Item1",
                            "attrValue": "",
                            "attrType":"text"
                        },
                        {
                            "attrname": "Item2",
                            "attrValue": "",
                            "attrType":"text"
                        }
                    ]
                }
            ],
            "key": "bolla"
        }
    ]

};
    $scope.filterSelected = $scope.getItems.data[0].objects;

        $scope.myNewArray = {
            objects: [

            ]
        }

        $scope.createjson = function(attribute, items) {
            var obj = {};
            obj.name = attribute;
            obj.attributes = [];
            obj.attributes.push(items);
            return obj;
        }

        $scope.checkIfAttributeExists = function(attribute) {        
            for(var i=0; i<$scope.myNewArray.objects.length; i++) {                
                if($scope.myNewArray.objects[i]["name"] == attribute) {
                    return i;
                }
            }
            return -1;
        }

        $scope.pushItems = function pushItems(attribute, items) {
            var index = $scope.checkIfAttributeExists(attribute);
            if(index == -1) {
                var obj = $scope.createjson(attribute, items);
                $scope.myNewArray.objects.push(obj);
            } else if(index !== -1) {

                $scope.myNewArray.objects.splice(index, 1);

            }else {
                $scope.myNewArray.objects[index].attributes.push(items);
            }
        }

        $scope.showNewJson = function() {
            return $scope.myNewArray;
        }
}]);

似乎问题出在索引中。在这里我创建了一个jsFiddle：

更新链接： https://jsfiddle.net/vuqcopm7/53/

实际上这就是代码所做的事情：

{"objects":[{"name":"firstObj","attributes":[{"attrname":"Item1","attrValue":"","attrType":"text"}]},{"name":"firstObj","attributes":[{"attrname":"Item1","attrValue":"","attrType":"text"}]},{"name":"firstObj","attributes":[{"attrname":"Item2","attrValue":"","attrType":"text"}]}]}

正如您所看到的那样，属性有两次＆＃34; Item1＆＃34;因为我点了两遍它。但如果我点击两次，Item1就会消失！所以正确的json将是：

{"objects":[{"name":"firstObj","attributes":[{"attrname":"Item2","attrValue":"","attrType":"text"}]}]}

Answer 1

您可以按如下方式大大简化代码：

HTML

 <ul ng-repeat="item in att.attributes">
      <li>
           <a ng-click="pushItems(item)">{{item.attrname}}</a>
      </li>
 </ul>

JS

$scope.pushItems = function pushItems(item) { // note only single argument now
    // index the whole item object
    var itemIndex = $scope.myNewArray.objects.indexOf(item);
    if (itemIndex == -1) {
        // if index doesn't exist ...add to array
        $scope.myNewArray.objects.push(item);
    } else {
        // otherwise remove from array
        $scope.myNewArray.objects.splice(itemIndex, 1);
    }
}

通过使用对象本身，您不需要查看对象的属性来检查它是否存在，而是检查实际对象的索引

的 DEMO

Answer 2

var index = $scope.checkIfAttributeExists(attribute);

你传递了错误的论点。

从json中删除项目再次单击

2 个答案: