CODEWITHSUNDEEP
javascriptarraysangularjs
jtrdev
jtrdev

Reputation: 932

angular array isn't passing to main controller form object

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"
  ]
}

Upvotes: 0

Views: 75

Answers (1)

Chic
Chic

Reputation: 10509

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.

Upvotes: 1

Related Questions