javascript - 使用 AngularJS 单击添加按钮时如何在表中插入新数据行

Question

路线图:我有一个表单，其中包含一行一些字段和选择菜单。因此，当我在该表单中插入所有数据并按添加 (+) 按钮时，我希望该信息自动添加为表单下方定义的表中的一行。

我的表格:

<div class="form-inline">   <!-- location form -->
<div class="form-group">
    <input type="text" placeholder="Landmark" ng-model="company.location.landmark"/> 
</div>
<div class="form-group">
    <input type="text" placeholder="Street 1" ng-model="company.location.street1"/> 
</div>
<div class="form-group">
    <input type="text" placeholder="Street 2" ng-model="company.location.street2"/> 
</div>
<div class="form-group">
    <input type="text" placeholder="City" ng-model="company.location.city"/> 
</div>
<div class="form-group">
    <select>
        <option selected> State </option>
        <option ng-model="company.location.state"> USA </option>
    </select>
</div>
<div class="form-group">
    <input type="text" placeholder="Zip" ng-model="company.location.zip"/> 
</div>
<div class="form-group">
    <select>
        <option selected> Country </option>
        <option ng-model="company.location.country"> Houston </option>
        <option ng-model="company.location.country"> Dallas </option>
    </select>
</div>
<div class="form-group">
    <input type="text" placeholder="Latitude" ng-model="company.location.latitude"/> 
</div>
<div class="form-group">
    <input type="text" placeholder="Longitude" ng-model="company.location.longitude"/> 
</div>
<div class="form-group">
    <select>
        <option selected> Type </option>
        <option ng-model="company.location.type"> Permanent </option>
    </select>
</div>
<div class="form-group">
    <input type="button" class="btn btn-default btn-sm" value=" + " style="height: 25px;"/>
</div>

注意:在此表单中，我可能有联系人列表和位置列表，因此还请更正我定义的 ng-model，如下所示:

ng-model="company.location" and ng-model="company.location.contact"

TABLE 定义在表单的正下方:

<table class="table-striped"> <!-- location table -->
<tr>
    <th>Landmark</th>
    <th>Street 1</th>
    <th>Street 2</th>
    <th>City</th>
    <th>State</th>
    <th>Zip</th>
    <th>Country</th>
    <th>Latitude</th>
    <th>Longitude</th>
    <th>Type</th>
</tr>
<tr ng-repeat="location in company.location">
    <td>{{location.landmark}}</td>
    <td>{{location.street1}}</td>
    <td>{{location.street2}}</td>
    <td>{{location.city}}</td>
    <td>{{location.state}}</td>
    <td>{{location.zip}}</td>
    <td>{{location.country}}</td>
    <td>{{location.latitude}}</td>
    <td>{{location.longitude}}</td>
    <td>{{location.type}}</td>
</tr>

Currently, as I type in the single field of form, an empty row is added as I type. But Actually I want the form added to the table when I click on the ADD button of the form.

运行页面时的输出:

我在某些字段中输入时的输出:

Finally, all I want you to help me in, is to get working the ADD button of the form. Thank you so much.

等待您的友好回复。

Answer 1

您可以在表单字段和数组中使用范围内的对象，并在按下添加按钮时将对象插入其中。

您可以查看创建的plunker用于演示目的。

app.controller('MainCtrl', function($scope) {

  $scope.companyForm = {
    landmark: null,
    street1: null,
    street2: null,
    city: null,
    state: null,
    zip: null,
    country: null,
    latitude: null,
    longitude: null,
    type: null
  }

  $scope.company = {};
  $scope.company.location = [];

  $scope.addLocation = () => {
    $scope.company.location.push({
      landmark: $scope.companyForm.landmark,
      street1: $scope.companyForm.street1,
      street2: $scope.companyForm.street2,
      city: $scope.companyForm.city,
      state: $scope.companyForm.state,
      zip: $scope.companyForm.zip,
      country: $scope.companyForm.country,
      latitude: $scope.companyForm.latitude,
      longitude: $scope.companyForm.longitude,
      type: $scope.companyForm.type
    });
  }

在 html 代码中:

<input type="text" placeholder="Landmark" ng-model="companyForm.landmark"/>

//...

<div class="form-group">
    <input type="button" ng-click="addLocation()" class="btn btn-default btn-sm" value=" + " style="height: 25px;"/>
</div>

对于<select>字段，您可以在 Controller 中定义相关数组:

$scope.states = ['USA'];
$scope.countries = ['Houston', 'Dallas'];
$scope.types = ['Permanent'];

在 html 中:

<div class="form-group">
    <select ng-model="companyForm.country" ng-options="o as o for o in countries">
        <option value="" selected> Country </option>
    </select>
</div>

检查更新plunker .