Editing array AngularJS

Question

Here is my JS:

var app = angular.module('plunker', []);
  app.controller('MainCtrl', function($scope) {
    $scope.items = [
      {
      "name": "john",
      "params": {
        "age": 22,
        "weight": 66
      }
},
   {
      "name": "eva",
      "params": {
        "age": 19,
        "weight": 54
      }
},
   {
      "name": "jeremy",
      "params": {
        "age": 17,
        "weight": 75
      }
}
    ]
    $scope.add = function(name, age, weight) {

      $scope.items.push({"name" : name, "params" : {"age" : age, "weight" : weight}});
      console.log($scope.items);
    }
  });

My HTML:

<div ng-repeat="item in items">
      <p>{{item.name}}</p>
      <input class="form-control" name="type" placeholder="name" ng-model="name">

      <br />

      <ul>
        <li ng-repeat="(name, param) in item.params">{{name}} : {{param}}</li>
        <input class="form-control" placeholder="age" ng-model="age">
         <input class="form-control" placeholder="weight" ng-model="weight">
        <button class="btn btn-clear" type="button" ng-click="add(name, age, weight)">Update</button>
      </ul>

    </div>

I want to edit array, and push this array in place of editing array, not add like new array. Here is my plunker : http://plnkr.co/edit/ewyzJWJOdNOKoSxWacNX?p=preview Thanks for answers in advance!

Aleksey Solovey · Accepted Answer · 2018-05-29 10:12:13Z

2

Simply add an index as a parameter. Your add function should become:

$scope.edit = function(index, name, age, weight) {
  $scope.items[index] = {"name" : name, "params" : {"age" : age, "weight" : weight}};
}

And your button must call that function with $index as a parameter, which will come from ng-repeat:

<button class="btn btn-clear" type="button" ng-click="edit($index, name, age, weight)">
  Update
</button>

If you want to update only one of the parameters and not everything at once, I suggest changing the edit function to:

var x = $scope.items[index];
$scope.items[index] = {"name" : name || x.name, "params" : {"age" : age || x.params.age, "weight" : weight || x.params.weight}};

It will use default parameters for the ng-model that are empty

edited May 29, 2018 at 10:12

answered May 29, 2018 at 9:30

Aleksey Solovey

4,1663 gold badges18 silver badges34 bronze badges

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

Comments

Dilushika Weerawardhana · Accepted Answer · 2018-05-29 11:50:08Z

Simply track the ng-repeat in your HTML by the $index and pass the index to the controller.

 <div ng-repeat="item in items track by $index">
  <p>{{item.name}}</p>
  <input class="form-control" name="type" placeholder="name" ng-model="name">

  <br />

  <ul>
    <li ng-repeat="(name, param) in item.params">{{name}} : {{param}}</li>
    <input class="form-control" placeholder="age" ng-model="age">
     <input class="form-control" placeholder="weight" ng-model="weight">
    <button class="btn btn-clear" type="button" ng-click="add($index, name, age, weight)">Update</button>
  </ul>

</div>

Edit the add function as below

$scope.add = function(index, name, age, weight) {
      if (name) {
         $scope.items[index].name = name;
      } 

      if (age) {
         $scope.items[index].params.age = age;
      } 

      if (weight) {
          $scope.items[index].params.weight = weight;
      }
    }

We need to add the conditions, otherwise non-set params will be set to empty.

Check this:

http://plnkr.co/edit/K9Nud7u9VqIpbk58uB8b?p=preview

cheers!

manish kumar · Accepted Answer · 2018-05-29 09:33:54Z

0

you just capture the index and in the scope make that changes.

There are two cases you can do

You can insert the new element and remove the older element , which might be visually confusing.

second

you can cature the index and replace the values.

$scope.add = function(name, age, weight,index) {

$scope.items[index]={"name" : name, "params" : {"age" : age, "weight" : weight}};
          console.log($scope.items);
        }

check this plunkr

answered May 29, 2018 at 9:33

manish kumar

4,7184 gold badges39 silver badges52 bronze badges

Comments

thaveethu gce · Accepted Answer · 2018-05-29 09:34:28Z

0

Change your logic like following

    $scope.add = function(name, age, weight,index) {
    if(name)
     $scope.items[index]["name"]=name;
     if(age)
     $scope.items[index]["params"]["age"]=age;
     if(weight)
     $scope.items[index]["params"]["weight"]=weight;
      console.log($scope.items);
    }

it will update on the corresponding object

Here update plunk http://plnkr.co/edit/ZUqHNNHLSweTHKxkLFRM?p=preview

answered May 29, 2018 at 9:34

thaveethu gce

6352 gold badges10 silver badges22 bronze badges

Collectives™ on Stack Overflow

Editing array AngularJS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related