如何使用angularjs向表中添加动态行 [英] How to add dynamic row to a table using angularjs

问题描述

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

Like jQuery, How can I add dynamic rows to a table with form elements in a button click using angularjs and How to differentiate these form elements like array name in normal jquery submit.

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

推荐答案

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

It is important to remember that, with Angular, you are not adding new rows to the table but are, instead, modifying the data of the model. The view will update automatically when the model changes. What you have shown in your example is merely the HTML template portion of what Angular is going to do. As mentioned, you will not be modifying these DOM elements but instead should be manipulating the model. So here are the steps I would suggest:

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 { background-color: #FEE;边框:纯红色 1px }

Optionally add CSS to display when fields are valid/invalid

input.ng-invalid { background-color: #FEE; border: solid red 1px }

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

As you can see, you are doing no direct modification of the DOM whatsoever. You get all the baked-in goodness of form validation without having to write any real code. The controller acts purely as a controller by holding the model and exposing various functions to its scope. You could take this further down the angular path by injecting services which handle retrieving and updating the data, and those services are then shared. Perhaps you already do this in your code, but this code should work for your specific example without any additional dependencies.

这篇关于如何使用angularjs向表中添加动态行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！