AngularJS - Save as multiple rows - data coming from ng-repeat

Question

Hello new to AngularJS and I am trying to wrap my head around something...

Basically I have a form that can accept 1 to many "Guests" for an event. Using ng-repeat I display the fields like so:

<div ng-repeat="guest in guests">
  <input type="text" ng-model="guests[$index].first_name" />
  <input type="text" ng-model="guests[$index].last_name" />
  <select ng-model="guests[$index].meal" ng-options="meal.id as meal.name for meal in meals"></select>
  <select ng-model="guests[$index].rsvp">
    <option value="0">No</option>
    <option value="1">Yes</option>
  </select>
</div>
<div class="controls"><button ng-click="submit()" class="btn btn-success">Save</button></div>

And in the controller:

  //DETERMINE TOTAL IN PARTY
  var totalInParty = 2;
  $scope.meals = RSVPRes.Meals.query();

  //EDIT
  if ($scope.rsvpId) {
  }
  //NEW RSVP SUBMISSION
  else {
    $scope.rsvp = new RSVPRes.RSVP();
    //INITIALIZE EMPTY GUESTS
    $scope.guests = [];
    for (var i = 0; i < totalInParty; i++) {
      $scope.guests[i] = {
        first_name: '',
        last_name: '',
        meal: 1,
        rsvp: 0
      };
    }
  }

And my Resource

.factory( 'RSVPRes', function ( $resource )  {
  return {
    RSVP: $resource("../reservations/:id.json", {id:'@id'}, {'update': {method:'PUT'}, 'remove': {method: 'DELETE', headers: {'Content-Type': 'application/json'}}}),
    Meals: $resource('../meals.json')
  };
})

Now all this works really well - I am just having trouble saving the data. I would like to save each Guest (First Name, Last Name, Meal & RSVP) as it's own row.

If I try this:

$scope.submit = function() {
  for(var i = 0; i < $scope.guests.length; i++){
    $scope.rsvp.first_name = $scope.guests[i].first_name;
    $scope.rsvp.last_name = $scope.guests[i].last_name;
    $scope.rsvp.meal_id = $scope.guests[i].meal;
    $scope.rsvp.rsvp = $scope.guests[i].rsvp;
    $scope.rsvp.$save();
   }
   $state.transitionTo('rsvps');
 };

It creates two rows (total_in_party set to 2) but it's always the 2nd persons data.

Feel like I am close, I looked a quite a few ng-repeat examples, but couldn't find one that deals with my specific case!

Any help is appreciated.

SOLVED

I totally duffed my thinking about the Resource, creating a new RSVP object now everytime in the loop.

$scope.submit = function() {
  for(var i = 0; i < $scope.guests.length; i++){
    $scope.rsvp = new RSVPRes.RSVP();
    $scope.rsvp.first_name = $scope.guests[i].first_name;
    $scope.rsvp.last_name = $scope.guests[i].last_name;
    $scope.rsvp.meal_id = $scope.guests[i].meal;
    $scope.rsvp.rsvp = $scope.guests[i].rsvp;
    $scope.rsvp.$save();
   }
   $state.transitionTo('rsvps');
 };

I think the problem is with the length. $scope.guests.length. Put an alert inside the loop and see. — MACMAN
– MACMAN, Commented Dec 12, 2013 at 2:56
Hmmm through the debugger it is giving me the expected values (2). It loops twice, but the save is only executed once the looping is finished, rather than saving each iteration... — OHope
– OHope, Commented Dec 12, 2013 at 3:01
The id is not changing between the calls to save. The resource defines the id field as @id but your object seems to be using meal_id. — Nathaniel Johnson
– Nathaniel Johnson, Commented Dec 12, 2013 at 5:20

MACMAN · Accepted Answer · 2013-12-12 03:11:08Z

0

Move $scope.rsvp.$save(); outside the loop

answered Dec 12, 2013 at 3:11

MACMAN

1,9712 gold badges22 silver badges37 bronze badges

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

Collectives™ on Stack Overflow

AngularJS - Save as multiple rows - data coming from ng-repeat

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related