javascript - 如何使用 angularjs 将动态行添加到表中

Question

与 jQuery 一样，如何使用 angularjs 在单击按钮时将动态行添加到带有表单元素的表中，以及如何区分这些表单元素，例如普通 jquery 提交中的数组名称。

<tr>
    <td style="text-align:center">1</td>
    <td>
         <input type="text" class="form-control"  required ng-model="newItem.assets">
    </td>
    <td>
        <select ng-model="newItem.type" class="form-control">
            <option value="Rent" ng-selected="'Rent'">Rent</option>
            <option value="Lease">Lease</option>
        </select>
    </td>
    <td>
        <input type="text" class="form-control"  required ng-model="newItem.amount" />
    </td>
    <td>
        <select ng-model="newItem.calculation_type" class="form-control">
            <option value="Daily" ng-selected="'Daily'">Daily</option>
            <option value="Monthly">Monthly</option>
            <option value="Yearly">Yearly</option>
        </select>
    </td>
    <td>
        <input type="text" class="form-control"  required ng-model="newItem.total_amount" />
    </td>
</tr>

Answer 1

重要的是要记住，使用 Angular，您并不是在向表中添加新行，而是在修改模型的数据。当模型更改时， View 将自动更新。您在示例中展示的只是 Angular 将要执行的操作的 HTML 模板部分。如前所述，您不会修改这些 DOM 元素，而应该操纵模型。所以这里是我建议的步骤:

为你的表创建一个 Controller

app.controller('CostItemsCtrl', [ '$scope', function($scope) {
  // the items you are managing - filled with one item just as an example of data involved
  $scope.items = [ { assets: 'My assets', type: 'Rent', amount: 500, 'calculation_type': 'Daily', total: 0}, ... ];
  // also drive options from here
  $scope.assetTypes = [ 'Rent', 'Mortgage' ];
  $scope.calcTypes = [ 'Daily', 'Monthly', 'Yearly' ];

  // expose a function to add new (blank) rows to the model/table
  $scope.addRow = function() { 
    // push a new object with some defaults
    $scope.items.push({ type: $scope.assetTypes[0], calculation_type: $scope.calcTypes[0] }); 
  }

  // save all the rows (alternatively make a function to save each row by itself)
  $scope.save = function() {
    // your $scope.items now contain the current working values for every field shown and can be parse, submitted over http, anything else you want to do with an array (like pass them to a service responsible for persistance)
    if ($scope.CostItemsForm.$valid) { console.log("it's valid"); }
  }

用 HTML 显示数据

<form name="CostItemsForm" ng-controller="CostItemsCtrl">
<table>
<tr><th>Assets</th><th>Type</th><th>Amount</th><th>Calculation</th><th>Total</th></tr>
<tr><td colspan="5"><button ng-click="addRow()">Add Row</button></td></tr>
<tr ng-repeat="item in items">
  <td><input required ng-model="item.assets"></td>
  <td><select ng-model="item.type" ng-options="type for type in assetTypes"></select></td>
  <td><input required ng-model="item.amount"></td>
  <td><select ng-model="item.calculation_type" ng-options="type for type in calcTypes"></td>
  <td><input required ng-model="item.total"></td>
</tr>
<tr><td colspan="5"><button ng-click="save()">Save Data</button></tr>
</table>
</form>

可选择添加 CSS 以在字段有效/无效时显示

input.ng-invalid { 背景色:#FEE；边框:纯红色 1px

“Angular 方式”

如您所见，您没有对 DOM 进行任何直接修改。您无需编写任何实际代码即可获得表单验证的所有内置优点。 Controller 通过持有模型并将各种功能公开到其范围来纯粹充当 Controller 。您可以通过注入(inject)处理检索和更新数据的服务来进一步沿着 Angular 路径进行下去，然后共享这些服务。也许您已经在您的代码中执行了此操作，但此代码应该适用于您的特定示例而无需任何其他依赖项。