CODEWITHSUNDEEP
angularjsmongodb
Johhan Santana
Johhan Santana

Reputation: 2415

Update an object inside an array inside an object in AngularJS

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?

Upvotes: 0

Views: 494

Answers (2)

Johhan Santana
Johhan Santana

Reputation: 2415

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

Upvotes: 0

Mohammad Aslam
Mohammad Aslam

Reputation: 250

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.

Upvotes: 2

Related Questions