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

问题描述

像jQuery，我怎么能动态行添加到表使用angularjs和如何区分这些表单元素，如在正常的jQuery数组名称提交按钮单击窗体元素。

 ＆LT; TR＆GT;
    ＆LT; TD风格=文本对齐：中心＆GT; 1 LT; / TD＆GT;
    ＆所述; TD＆GT;
         ＆LT;输入类型=文本级=表格控要求的NG-模式=newItem.assets＆GT;
    ＆LT; / TD＆GT;
    ＆所述; TD＆GT;
        ＆LT;选择NG模型=newItem.type级=表格控＆GT;
            ＆LT;期权价值=租NG-选择='租'＆GT;＆租金LT; /选项＆GT;
            ＆LT;期权价值=租赁＆GT;租赁和LT; /选项＆GT;
        ＆LT; /选择＆GT;
    ＆LT; / TD＆GT;
    ＆所述; TD＆GT;
        ＆LT;输入类型=文本级=表格控要求的NG-模式=newItem.amount/＆GT;
    ＆LT; / TD＆GT;
    ＆所述; TD＆GT;
        ＆LT;选择NG模型=newItem.calculation_type级=表格控＆GT;
            ＆LT;期权价值=人民日报NG-选择='日报'＆GT;日＆LT; /选项＆GT;
            ＆LT;期权价值=每月＆GT;每月＆LT; /选项＆GT;
            ＆LT;期权价值=年＆GT;＆年度LT; /选项＆GT;
        ＆LT; /选择＆GT;
    ＆LT; / TD＆GT;
    ＆所述; TD＆GT;
        ＆LT;输入类型=文本级=表格控要求的NG-模式=newItem.total_amount/＆GT;
    ＆LT; / TD＆GT;
＆LT; / TR＆GT;
 

解决方案

要记住这一点，与棱角分明，您不添加新行到表的，相反，修改模型的数据是很重要的。当模型改变视图将自动更新。你已经在你的例子显示的仅仅是什么角度会做的HTML模板部分。正如前面提到的，你会不会修改这些DOM元素，而是要操纵的模型。因此，这里是我建议的步骤：

为您的表创建控制器

  app.controller（'CostItemsCtrl'，['$范围'，函数（$范围）{
  //正在管理的物品 - 充满一个项目只是所涉及的数据的例子
  $ scope.items = [{资产：我的资产，键入：租金，数量：500，'calculation_type：每天，总：0}，...];
  //也从这里开车选项
  $ scope.assetTypes = ['租'，'按揭'];
  $ scope.calcTypes = ['日报'，'月'，'年度'];  //公开一个功能，新的（空）行添加到模型/表
  $ scope.addRow =功能（）{
    //推的新对象与一些默认
    $ scope.items.push（{类型：$ scope.assetTypes [0]，calculation_type：$ scope.calcTypes [0]}）;
  }  //保存所有行（或者一个函数本身，以节省每一行）
  $ scope.save =功能（）{
    //你的$ scope.items现在包含了显示各个领域当前的工作价值观，可以解析，提交通过HTTP，其他任何你想用一个数组做（如它们传递到负责持久性服务）
    如果（$ scope.CostItemsForm $有效）{执行console.log（它是有效的）; }
  }
 

与HTML显示数据

 ＆LT;表格名称=CostItemsFormNG控制器=CostItemsCtrl＆GT;
＆LT;表＆gt;
<tr><th>Assets</th><th>Type</th><th>Amount</th><th>Calculation</th><th>Total</th></tr>
＆LT; TR＆GT;＆LT; TD合并单元格=5＆GT;＆LT;按钮NG点击=addRow（）＆gt;添加行＆LT; /按钮＆GT;＆LT; / TD＆GT;＆LT; / TR＆GT;
＆LT; TR NG重复=项中的项目＆GT;
  ＆LT; TD＆GT;＆LT;输入所需的NG-模式=item.assets＆GT;＆LT; / TD＆GT;
  ＆LT; TD＆GT;＆LT;选择NG模型=项目。形式NG选项=类型的assetTypes型＆GT;＆LT; /选择＆GT;＆LT; / TD＆GT;
  ＆LT; TD＆GT;＆LT;所需的输入NG模型=item.amount＆GT;＆LT; / TD＆GT;
  ＆LT; TD＆GT;＆LT;选择NG模型=item.calculation_typeNG选项=类型的calcTypes型＆GT;＆LT; / TD＆GT;
  ＆LT; TD＆GT;＆LT;输入所需的NG-模式=item.total＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; TR＆GT;＆LT; TD合并单元格=5＆GT;＆LT;按钮NG点击=保存（）＆GT;保存数据和LT; /按钮＆GT;＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; /表及GT;
 

选择添加CSS时显示的字段都有效/无效

input.ng-无效{背景颜色：#FEE;边界：固体1px的红色}

的角之路

正如你所看到的，你正在做的任何DOM没有直接修改。你得到表单验证的全部出炉，善良而无需编写任何真正的code。控制器通过保持模型和暴露的各种功能，以在其范围纯粹充当控制器。可以进一步借此向下角度路径通过注入其中手柄检索服务和更新数据，然后将这些服务的共享。也许你已经做到这一点在你的code，但这code应该为您的具体工作，例如没有任何额外的依赖关系。

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>

解决方案

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.

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