Comment ajouter une ligne dynamique à une table en utilisant angularjs

Il est important de rappeler que, avec Angular, vous n'ajoutez pas de nouvelles lignes à la table, mais modifiez plutôt les données du modèle. La vue se met à jour automatiquement lorsque le modèle change. Ce que vous avez montré dans votre exemple, c'est simplement la partie de modèle HTML de ce que Angular va faire. Comme mentionné, vous ne modifiez pas ces éléments DOM, mais au lieu de cela, il faudrait manipuler le modèle. Voici donc les étapes que je propose:

Créer un contrôleur pour votre 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"); } } 

Afficher les données avec votre 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> 

En option, ajoutez CSS pour afficher lorsque les champs sont valides / invalides

Input.ng-invalid {background-color: #FEE; Bordure: solide rouge 1px}

La "voie angulaire"

Comme vous pouvez le voir, vous ne modifiez pas directement le DOM. Vous obtenez toutes les boulangeries dans la validation de la forme sans avoir à écrire de code réel. Le contrôleur agit uniquement comme contrôleur en tenant le modèle et en exposant diverses fonctions à sa portée. Vous pourriez attirer cela plus loin dans le chemin angulaire en injectant des services qui gèrent la récupération et la mise à jour des données, et ces services sont ensuite partagés. Peut-être que vous le faites déjà dans votre code, mais ce code devrait fonctionner pour votre exemple spécifique sans aucune dépendance supplémentaire.

Vous devriez rendre la ligne en utilisant ng-repeat , en tant que telle:

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

Où cela se ressemblera:

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