角從JSON刪除項目

Question

我有一個列表，當我單擊某個項目時，會生成一個輸入文本，並將該輸入的屬性添加到json中。 實際上，如果我單擊列表中的項目更多次，則我單擊的所有時間都會添加到json。 例如，如果我單擊列表第一項的3倍，則此json是：

{
    "newArray":
    [
        {
            "attrname": "asd1",
            "attrValue": "",
            "attrType": "text"
        },
        {
            "attrname": "asd1",
            "attrValue": "",
            "attrType": "text"
        },
        {
            "attrname": "asd1",
            "attrValue": "",
            "attrType": "text"
        }
    ]
}

相反，如果我單擊1次添加項目，那么如果我再次單擊，它將從json中刪除該項目。 這段代碼是這樣的：

<div ng-app='myApp' ng-controller='mycontroller'>

    <div data-ng-repeat="item in myNewArray.newArray track by $index">
        <div ng-if="item.attrType == 'text'">
            <input id="form-f{{$index}}" type="text" placeholder="{{item.attrname}}" data-ng-model="item.attrValue"/>
        </div>
    </div>
    <div data-ng-repeat="object in getItems.data">
        <div data-ng-repeat="att in object.objects">
            <ul ng-repeat="data in att.attributes">
                <li>
                    <a ng-click="pushItems(data)" style="cursor:pointer">{{data.attrname}}</a>
                </li>
            </ul>
        </div>

    </div>
    {{myNewArray}}
</div>

角部分：

var myApp = angular.module('myApp',[]);

myApp.controller("mycontroller", ["$scope", "$http",
    function($scope, $http){
        $scope.getItems = {
    "data": [
        {
            "label": "first",
            "objects": [
                {
                    "name": "firstObj",
                    "attributes": [
                        {
                            "attrname": "asd1",
                            "attrValue": "",
                            "attrType":"text"
                        },
                        {
                            "attrname": "asd2",
                            "attrValue": "",
                            "attrType":"text"
                        }
                    ]
                }
            ],
            "key": "bolla"
        },
        {
            "label": "second",
            "objects": [
                {
                    "name": "secondObj",
                    "attributes": [
                        {
                            "attrname": "asd",
                            "attrValue": "",
                            "attrType":"text"
                        },
                        {
                            "attrname": "asd3",
                            "attrValue": "",
                            "attrType":"text"
                        }
                    ]
                }
            ],
            "key": "2"
        }
    ]

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

        $scope.myNewArray = {
            newArray: [

            ]
        }
        $scope.pushItems = function pushItems(items) {
            $scope.myNewArray.newArray.push(angular.copy(items));
            console.log($scope.myNewArray);
        }

}]);

這里是jsfiddle https://jsfiddle.net/vuqcopm7/42/

謝謝

Answer 1

我不確定您是否真的要在數組中推送項目的副本，在像您這樣的情況下，組成一個真實項目的數組更有意義，這樣您就可以操作數組項目，並且它也會反映在原件上。 在這種情況下，添加/刪除將如下所示：

$scope.pushItems = function pushItems(items) {
    var index = $scope.myNewArray.newArray.indexOf(items);
    if (index !== -1) {
        $scope.myNewArray.newArray.splice(index, 1);
    }
    else {
        $scope.myNewArray.newArray.push(items);
    }
};

演示： https : //jsfiddle.net/f5nxsqxm/

Answer 2

我會將您的屬性JSON數組交換為對象文字，並使用屬性名稱作為鍵。 這樣可以確保每個屬性名稱最多包含一項。 對象文字將更像字典，看起來更接近於您要使用的字典。

遍歷對象文字的性能應該比數組還要好。