如何使用angularjs向表中添加动态行

Question

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>

Answer 1

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:

Create a controller for your table

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"); }
  }

Display the data with your 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>

Optionally add CSS to display when fields are valid/invalid

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

The "Angular Way"

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.

Answer 2

You should render the row using ng-repeat , as such:

<form ng-submit="onSubmit(newItem)">
    <table>
    <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>
    <tr ng-repeat="row in rows">
        <td>{{row.assets}}</td>
        <td>{{row.selected}}</td>
        <td>{{row.amount}}</td>
        <td>{{row.calculation_type}}</td>
    </tr>
    </table>
</form>

where this is how your controller should look like:

angular.module('angularSimpleApp').controller('MyCtrl', function ($scope) {
    $scope.newItem = ''; // represents the models in the form
    $scope.rows = [];
    $scope.onSubmit = function(obj) {
        $scope.products.push(obj);
    }
});