web-dev-qa-db-ja.com

angularjsを使用して動的行をテーブルに追加する方法

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>
javascriptangularjsangularjs-directiveangularjs-scope
13
devo

Angularでは、テーブルに新しい行を追加するのではなく、モデルのデータを変更することに注意してください。モデルが変更されると、ビューは自動的に更新されます。この例で示したのは、Angularが行うことのHTMLテンプレート部分です。前述のように、これらのDOM要素を変更するのではなく、モデルを操作する必要があります。ここに私が提案する手順があります：

テーブル用のコントローラーを作成する

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;境界線：赤一色}

「角道」

ご覧のとおり、DOMを直接変更することは一切ありません。実際のコードを記述することなく、フォーム検証のすべてが組み込まれています。コントローラーは、モデルを保持し、さまざまな機能をスコープに公開することにより、純粋にコントローラーとして機能します。データの取得と更新を処理するサービスをインジェクトすることにより、これをangularパスのさらに下に移動することができます。これらのサービスは共有されます。追加の依存関係のない特定の例の場合。

18
Matt Pileggi

次のように、ng-repeatを使用して行をレンダリングする必要があります。

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

コントローラの外観は次のとおりです。

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);
    }
});
3
lolski