web-dev-qa-db-fra.com

Comment ajouter une ligne dynamique à une table en utilisant angularjs

Comme jQuery, comment puis-je ajouter des lignes dynamiques à une table avec des éléments de formulaire dans un clic de bouton en utilisant angularjs et comment différencier ces éléments de formulaire comme le nom du tableau dans la soumission jquery normale.

<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

Il est important de se rappeler qu'avec Angular, vous n'ajoutez pas de nouvelles lignes à la table mais modifiez plutôt les données du modèle. La vue sera mise à jour automatiquement lorsque le modèle change. Ce que vous avez montré dans votre exemple est simplement la partie du modèle HTML de ce que Angular va faire. Comme mentionné, vous ne modifierez pas ces éléments DOM mais vous devriez plutôt manipuler le modèle. Donc voici les étapes que je suggérerais:

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

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

Ajoutez éventuellement CSS pour afficher lorsque les champs sont valides/invalides

input.ng-invalid {background-color: #FEE; bordure: rouge uni 1px}

La "voie angulaire"

Comme vous pouvez le voir, vous n'effectuez aucune modification directe du DOM. Vous obtenez toute la bonté de la validation de formulaire sans avoir à écrire de code réel. Le contrôleur agit uniquement en tant que contrôleur en tenant le modèle et en exposant diverses fonctions à sa portée. Vous pouvez aller plus loin dans le chemin angular 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.

18
Matt Pileggi

Vous devez rendre la ligne à l'aide de ng-repeat, En tant que tel:

<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ù voici à quoi devrait ressembler votre contrôleur:

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