I have a list in which when i click over an item i generate an input text and i add the attributes of that input in a json. Actually if i click over an item of the list for more times it adds at json all of that times i click. For example, if i click 3 times the first item of the list i have this json:
{
"newArray":
[
{
"attrname": "asd1",
"attrValue": "",
"attrType": "text"
},
{
"attrname": "asd1",
"attrValue": "",
"attrType": "text"
},
{
"attrname": "asd1",
"attrValue": "",
"attrType": "text"
}
]
}
What i would instead is that if i click 1 time i add the item, then if i click again it removes the item from json. This is the code by the way:
<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>
the angular part:
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);
}
}]);
And here the jsfiddle /
Thanks
I have a list in which when i click over an item i generate an input text and i add the attributes of that input in a json. Actually if i click over an item of the list for more times it adds at json all of that times i click. For example, if i click 3 times the first item of the list i have this json:
{
"newArray":
[
{
"attrname": "asd1",
"attrValue": "",
"attrType": "text"
},
{
"attrname": "asd1",
"attrValue": "",
"attrType": "text"
},
{
"attrname": "asd1",
"attrValue": "",
"attrType": "text"
}
]
}
What i would instead is that if i click 1 time i add the item, then if i click again it removes the item from json. This is the code by the way:
<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>
the angular part:
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);
}
}]);
And here the jsfiddle https://jsfiddle/vuqcopm7/42/
Thanks
Share Improve this question edited May 21, 2015 at 7:43 Siguza 23.9k6 gold badges55 silver badges98 bronze badges asked May 21, 2015 at 7:40 Atlas91Atlas91 5,90417 gold badges75 silver badges148 bronze badges 6- Do you want to delete last item, first item or all array – hurricane Commented May 21, 2015 at 7:47
-
Is it really necessary to push the copy
angular.copy(items)or you can also push original? – dfsq Commented May 21, 2015 at 7:47 - mmm angular.copy(items) it's better right now. Btw you have to think the list like a checkbox. If i click in an item i add that item to array, if i click again the same item i remove it from array – Atlas91 Commented May 21, 2015 at 7:48
- so, summary, i can add the same item of the list in the array only ones at time while actually you can add the same item for infinite times. Understand now? – Atlas91 Commented May 21, 2015 at 7:49
- I'm not sure why you need the copy. It's just simpler with original, and in most cases preferred. – dfsq Commented May 21, 2015 at 7:51
2 Answers
Reset to default 3I'm not sure wether you really want to push a copy of the items in the array, in cases like yours it makes more sense to pose an array of real items so that you can manipulate array items and it would be reflected on originals too. In this case adding/removing would look like this:
$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);
}
};
Demo: https://jsfiddle/f5nxsqxm/
I would swap your attributes JSON array to an object literal and use the attribute names as keys. This would ensure you have at most one item per attribute name. Object literal would work more like a dictionary which appears to be closer to what you're looking to use.
Should be more performant traversing an object literal than an array here as well.