Angularjs rename items in an array - angularjs

Question

Adding items from one array to a new array using:
$scope.listItems = [];
$scope.addToList = function(item) {
$scope.listItems.push(item);
console.log($scope.listItems);
};
<tr ng-repeat="x in data">
<td><{{ x.id }}</td>
<td><button type="button" ng-click="addToList(x.id)">Add to</button></td>
</tr>
Then printing the new array:
<tr ng-repeat="item in listItems">
<td>{{item.id}}</td>
</tr>
Would it be possible to change the attribute names of the new listItems array using user input?

Answer 1

Sure its possible. But not the way your code is written. You need to pass the object to the function, not the id.
<tr ng-repeat="x in data">
<td>{{ x.id }}</td>
<td><input type="text" ng-model="newVal"/></td> <!--this property can be changed by user-->
<td><button type="button" ng-click="addToList(x, newVal)">Add to</button></td>
</tr>
and in the controller function:
$scope.addToList = function(item, newVal) {
var newItem = item;
newItem.id = newVal;
$scope.listItems.push(item);
console.log($scope.listItems);
};

Answer 2

You could definitely do that, But for that you need to pass in the object in itself not x.id.
Here is a sample working solution.
var app = angular.module("sampleApp", []);
app.controller("sampleController", ["$scope",
function($scope) {
$scope.data = [{
id: "City-1"
}, {
id: "City-2"
}, {
id: "City-3"
}, {
id: "City-4"
}, {
id: "City-5"
}];
$scope.listItems = [];
$scope.addToList = function(item) {
$scope.listItems.push(item);
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="sampleApp">
<div ng-controller="sampleController">
<table>
<tr ng-repeat="x in data">
<td>
{{ x.id }}</td>
<td>
<button type="button" ng-click="addToList(x)">Add to</button>
</td>
</tr>
</table>
New List:
<table>
<tr ng-repeat="item in listItems track by $index">
<td>
{{ item.id }}</td>
<td>
<button type="button" ng-click="addToList(x)">Add to</button>
</td>
</tr>
</table>
</div>
</div>