javascript - Angular 数组未传递给主 Controller 表单对象

Question

我有一个 EventController 并使用 EventService 来保存到 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;
                }
            });
    }

查看所有事件:

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

我的问题是我尝试添加带有数组的 guest 列表

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

我可以从单个输入/按钮将字符串添加到数组

但是，该数组不会传递给事件对象。

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

我的目标是将数组添加到对象

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

Answer 1

您需要设置事件的guests 属性。您可能想在 event() 函数中执行此操作。

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

在这种情况下，您必须初始化 guest 数组。

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

或者，您可以让您的 guest 修饰符函数引用该事件

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

此外，我发现事件与事件的命名令人困惑。在 EventController 中，我建议将 vm.event() 函数重命名为 vm.createEvent()，然后调用 events 模型 事件。