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

Posted 2023-05-09

【中文标题】使用AngularJS单击添加按钮时如何在表中插入新数据行

【英文标题】：How to insert new data row in table when clicked on add button with AngularJS

【发布时间】：2018-06-19 05:59:27

【问题描述】：

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

我的表格：

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

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

我运行页面时的输出：

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

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

等待您的友好回复。

【问题讨论】：

你能创建一个 plunkr，它会帮助我们快速回答你的问题，否则我们需要付出很多努力。

@undefined 感谢您的回复。但我不知道如何创建 plunkr，它是什么。

你可以使用这个启动的angularjs plunkr添加示例代码来说明你的问题plnkr.co/edit/c3PIZnwxj5aZrkzrpC02?p=preview

@undefined plnkr.co/edit/XnuIiv?p=preview 请看看这个，是你想说的吗？

【参考方案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。

【讨论】：

感谢我们快到了。但我们并没有从所有选择中获得价值

请告诉我如何从选择的选项中获取数据，如国家、类型、州等

更新了plunker。看看吧。

$scope.company 是一个具有数组类型属性location 的对象。所以company.location.length 会返回表格的大小，company.location[0] 会返回第一行数据的内容。

成功了。我在示例页面上多次提供控制器，因此导致数据重新初始化。在