Angularjs rename items in an array

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?

Is the cityName anything from data that you're iterating through ng-repeat ? anything like x.cityName ? — satya-j
– satya-j, Commented Oct 27, 2016 at 19:16
Ah forgott to change that one to x.id, shortened the code posted a bit to make it simpler. — Znowman
– Znowman, Commented Oct 27, 2016 at 19:18

M B · Accepted Answer · 2016-10-27 19:48:33Z

2

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

edited Oct 27, 2016 at 19:48

answered Oct 27, 2016 at 19:24

M B

2,32627 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Znowman Over a year ago

Was a misstake on my end, the real question was if it would be possible to change attribute names in the new listItems array through user input, like a text input field or something?

M B Over a year ago

property names or property values? see above for setting property values

Znowman Over a year ago

values like id.

M B Over a year ago

and the original array should stay the same?

Znowman Over a year ago

yes, thats the whole idea of creating the new array

Sreekanth · Accepted Answer · 2016-10-27 19:24:24Z

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>

Collectives™ on Stack Overflow

Angularjs rename items in an array

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related