Angular 对话框中的表单 - 对话框关闭后获取表单数据

Question

我用 Angularjs 和 Laravel 创建了一个网页。这是一个活动页面。在我的管理面板中，我可以管理所有事件。

当我点击 "Bearbeiten" 时，会出现一个新的 window。

在底部我可以add/remove不同的景点。当我提交表单时，我想将新数据保存在数据库中，但我不知道如何从公式中获取数据。我尝试了不同的想法，是的，我使用了 google.

当我点击 "Bearbeiten" 时，将执行以下代码：

<md-dialog-content style="padding: 20px;">
    <div layout-gt-sm="row">
        <md-input-container class="md-block"flex-gt-xs>
            <label>Name (Bsp: Schützenfest, Kirmes, Sommerdom)</label>
            <input value="{{ $data['event']->name }}" name="event_name">
        </md-input-container>
        <md-input-container class="md-block">
            <label>Stadt (Bsp: Hannover, München, Köln)</label>
            <input value="{{ $data['event']->city }}" name="event_city">
        </md-input-container>
    </div>
    <div layout-gt-sm="row">
        <md-input-container class="md-block" style="margin: 0" flex-gt-xs>
            <label>Straße</label>
            <input value="{{$data['event']->street }}" name="event_street">
        </md-input-container>
        <md-input-container class="md-block" style="margin: 0" flex-gt-xs>
            <label>Postleitzahl</label>
            <input value="{{ $data['event']->zip->id }}" name="event_zip">
        </md-input-container>
        <md-input-container class="md-block" style="margin: 0">
            <label>Webseite</label>
            <input value="{{ $data['event']->website }}" name="event_website">
        </md-input-container>
    </div>
    <div layout-gt-sm="row">
        <md-input-container class="md-block" style="margin: 0" flex-gt-xs>
            <label>Start (YYYY-MM-DD)</label>
            <input value="{{$data['event']->start }}" name="event_start">
        </md-input-container>
        <md-input-container class="md-block" style="margin: 0" flex-gt-xs>
            <label>Letzter Spieltag (YYYY-MM-DD)</label>
            <input value="{{$data['event']->end }}" name="event_end">
        </md-input-container>
    </div>
    <md-chips ng-model="mdDialogData[0]" name="event_attractions" readonly="false"
            md-removable="true" md-max-chips="100" placeholder="Attraktionen">
        <md-autocomplete
          md-selected-item="mdDialogData[1].selectedItem"
          md-search-text="mdDialogData[1].searchText"
          md-items="item in mdDialogData[1].querySearch(mdDialogData[1].searchText)"
          md-item-text="item"
          placeholder="Attraktion suchen">
          <span md-highlight-text="mdDialogData[1].searchText" style="width: 280px;">@{{ item }}</span>
        </md-autocomplete>
    <md-chip-template>
      <strong style="margin-right: 15px;">@{{$chip}}</strong>
    </md-chip-template>
  </md-chips>
</md-dialog-content>

<md-dialog-actions layout="row">
  <span flex></span>
  <md-button ng-click="answer([@{{ mdDialogData[0] }}, '1', '2'])">
   Änderungen speichern
  </md-button>
  <md-button ng-click="answer('useful')">
    Abbrechen
  </md-button>
</md-dialog-actions>

我不太擅长angular。也许这里有专家！

Answer 1

由于数据已经填充到弹出窗口中，我假设您已将数据数组正确传递给负责弹出窗口的 function/module。

现在，您只需更新包含您正在修改的可变数据字段的数组。您将需要删除您选择从数组中删除的数据，或者如果要添加新值则继续添加。然后，您需要在单击 ABBRECHEN 时传递更新的数组，并且需要更新数据库中的新值。从数组中删除的数据将在数组中创建空白空间，您可以在 Angular 或后端删除它，或者如果特定索引是 null/undefined 则简单地跳过逻辑.

Angular 对话框中的表单 - 对话框关闭后获取表单数据

Form in Angular Dialog - Get form data after dialog close

angularjs

angularjs-material