角度数组未传递到主控制器窗体对象

angular array isn't passing to main controller form object

本文关键字：控制器 窗体 对象 数组      更新时间：2023-09-26

我有一个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>
  ...

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

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

您需要设置事件的 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;
                }
            });
    }

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

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

或者，您可以让来宾修饰符函数引用事件

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

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

相关文章：