angular array isn't passing to main controller form object

Question

I have an EventController and use EventService for saving to localStorage.

vm.event = event;
    function event() {
        vm.dataLoading = true;
        EventService.Create(vm.events)  //save using ( api/events/ + id )
            .then(function (response) {
                if (response.success) {
                    FlashService.Success('Event created successful', true);
                    $location.path('/events');
                } else {
                    FlashService.Error(response.message);
                    vm.dataLoading = false;
                }
            });
    }

View All Events:

  <td>{{events.eventType}} </td>
  <td>{{events.eventName}}</td>
  ...

My problem is I tried adding a guest list with an array

        vm.guests = [];

        vm.addGuest = function () {
            vm.guests.push(vm.newGuest);
        }

        vm.removeGuest = function (guest) {
            var index = vm.guests.indexOf(guest);
            vm.guests.splice(index, 1);
        }

html

  <input type="text" name="guests" id="guests" class="form-control" ng-model="vm.newGuest"  />
  <button type="submit" ng-click="vm.addGuest()" class="btn btn-primary">Add Guest</button>
    <div ng-repeat="guest in vm.guests track by $index">
     {{guest}}

I can add strings to the array from a single input/button

However, the array doesn't get passed to the event object.

{
  "eventType": "Birthday",
  "eventName": "Part at Lake Lettuce"
}
[
  "Joe",
  "Tom"
]

My goal is to add the array to the object

{
  "eventType": "Birthday",
  "eventName": "Part at Lake Lettuce"
  "guests":  [
     "Joe",
     "Tom"
  ]
}

Where on the event object are you trying to put the guests array? — Chic
– Chic, Commented Feb 11, 2016 at 21:01
just a heads up (you may not be doing this): if you're resetting your array anywhere, that will make you lose the data binding. for example, if you're trying to empty the array by using vm.guests = []. you should avoid this and use vm.guests.length = 0 this will empty the array but maintain the data binding — Abdul Ahmad
– Abdul Ahmad, Commented Feb 11, 2016 at 21:03
@AbdulAhmad I see what you're getting at, I'm not trying to empty the array but I can see how it could be emptying the array anyway. Biggest complication is my input ng-model gets passed to event, but the array doesn't because it's addGuest and goes to the function. Also vm.guests.length = 0 errors saying Cannot set property 'length' of undefined at new EventController — jtrdev
– jtrdev, Commented Feb 15, 2016 at 21:54
Thanks, for the update. There's not enough of the controller for me to understand what's going on. I think I'm not following the events variable. Is it an array or object? And should <td>{{events.eventType}} </td> be <td>{{vm.events.eventType}} </td>? — Chic
– Chic, Commented Feb 16, 2016 at 14:03

Chic · Accepted Answer · 2016-02-16 21:41:20Z

You need to set the guests property of your event. You may want to do this within the event() function.

    function event() {
        vm.dataLoading = true;
        vm.events.guests = vm.guests;
        EventService.Create(vm.events)
            .then(function (response) {
                if (response.success) {
                    FlashService.Success('Event created successful', true);
                    $location.path('/events');
                } else {
                    FlashService.Error(response.message);
                    vm.dataLoading = false;
                }
            });
    }

In that case you would have to initialize the guests array.

vm.guests = vm.events.guests || [];

Alternatively, you can have your guests modifier functions reference the event

    vm.addGuest = function () {
        vm.events.guests.push(vm.newGuest);
    }

    vm.removeGuest = function (guest) {
        var index = vm.events.guests.indexOf(guest);
        vm.events.guests.splice(index, 1);
    }

Also, I find the event vs events naming confusing. Within the EventController I'd suggest renaming your vm.event() function to vm.createEvent() and then calling the events model just event.

Collectives™ on Stack Overflow

angular array isn't passing to main controller form object

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