使用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>

目前，当我在表单的单个字段中输入时，会在我输入时添加一个空行。但实际上我希望在单击表单的添加按钮时将表单添加到表格中。

我运行页面时的输出：

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

最后，我希望你能帮助我的只是开始使用表单的添加按钮。太感谢了。

等待您的友好回复。

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。