Update an object inside an array inside an object in AngularJS

Question

I'm building a client collection with the following information:

"name" : "Test client",
"email" : "[email protected]",
"position" : "Project Manger",
"contacts" : [
    {
        "name" : "asdf",
        "email" : "asdf@adf",
        "tel" : "7877877878",
        "title" : "asdf"
    },
    {
        "name" : "fdas",
        "email" : "fdas@fdas",
        "tel" : "7877877878",
        "title" : "fdsa"
    }
],

I want to be able to edit/update the contacts of the client but I'm not sure how to do so with angular since I have the form inside an ng-repeat repeating the contacts of a client.

<div ng-repeat="contact in contacts track by $index">
  <label>Name</label>
  <input type="tel" ng-model="contact.name">
  <label>Telephone</label>
  <input type="tel" ng-model="contact.tel">
  <label>Email</label>
  <input type="email" ng-model="contact.email">
  <label>Title</label>
  <input type="text" ng-model="contact.title">
  <md-button ng-click="save(contact)">Save</md-button>
</div>

and my controller:

'use strict'

angular.module('myApp')
.controller('ContactsCtrl', function($scope, $mdDialog, $mdMedia, client) {

  $scope.client = client;

  $scope.contacts = client.contacts;


  $scope.save = (contact) => {
    Clients.update({_id: client._id},{
      $set: {
        contacts : contact
      }
    },function(err, data){
      if(err) return console.log(err);
      console.log(data + " " );
      $mdDialog.hide(data);
    });
  }

  $scope.cancel = function() {
    $mdDialog.cancel();
  };

  $scope.hide = function() {
    $mdDialog.hide();
  };
});

But when I press save it replaces the array with a single object.

QUESTION

How can I update the existing objects in an array that are inside a document with a form that is inside an ng-repeat?

Mohammad Aslam · Accepted Answer · 2016-05-25 19:38:22Z

2

change html to :

<div ng-repeat="contact in contacts track by $index">
  <label>Name</label>
  <input type="tel" ng-model="contact.name">
  <label>Telephone</label>
  <input type="tel" ng-model="contact.tel">
  <label>Email</label>
  <input type="email" ng-model="contact.email">
  <label>Title</label>
  <input type="text" ng-model="contact.title">
  <md-button ng-click="save($index,contact)">Save</md-button>
</div>

and save() function to

$scope.save = (index,contact) => {
    Clients.update({_id: client._id},{
      $set: {
        contacts[index] : contact
      }
    },function(err, data){
      if(err) return console.log(err);
      console.log(data + " " );
      $mdDialog.hide(data);
    });
  }

hope it does the trick.

answered May 25, 2016 at 19:38

Mohammad Aslam

2503 silver badges14 bronze badges

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

1 Comment

Johhan Santana Over a year ago

Hi there, your code makes sense, but I keep getting syntax error at contacts[index] : contact

Johhan Santana · Accepted Answer · 2016-05-25 19:55:43Z

0

Was able to do a work around but I'm not sure if this is the best option.

Just add $index when doing the save function:

<md-button ng-click="save($index, contact)">Save</md-button>

and in the controller the save function:

$scope.save = (index, contact) => {
  $scope.client.contacts[index] = contact;
  Clients.update({_id: client._id},{
    $set: {
      contacts : $scope.client.contacts
    }
  },function(err, data){
    if(err) return console.log(err);
    console.log(data + " " );
    $mdDialog.hide(data);
  });
}

answered May 25, 2016 at 19:55

Johhan Santana

2,4556 gold badges35 silver badges63 bronze badges

Collectives™ on Stack Overflow

Update an object inside an array inside an object in AngularJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related