Question

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

我的表格：

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

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

我在运行页面时的输出：

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

最后，我希望你帮助我，就是开始使用表格的ADD按钮。非常感谢。

等待你的回应。

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。

单击使用AngularJS

1 个答案: