Question

如何动态添加行使用angularjs表

Answer 1

呃 真不明白这没有分的问题 大家为什么这么积极的回答- -……

然而写的那么复杂 我不明白他们在说什么

首先 你要动态添加行是为什么？是数据表格吗？

是的话就非常简单了

angularJS获取的数据就是数组嘛 跟用li的ng-repeat是一样的

我举个例子 假设数据是数组arr提供

arr[{
m:"dd",
d:"dd"
},
m:"ss",
d:"ss"
},
m:"sd",
d:"sd"
}
]

<table>
  <thead>
    <tr>
      <th>非</th>
       <th>常</th>
        <th>操作</th>
      </tr>
  </thead>
  <tbody>
  <tr ng-repeat="a in arr">
  <td>{a.m}</td>
  <td>{a.s}</td>
  </tr>
  <tbody>
  </table>

这样 有多少数据就又多少行

其次，其他的动态添加行，在angularJS的利用的思路都是一样的，是基于数据的，你把思路重点放在数据上 类似的动态添加就都不是问题。

但是如果你问的是 普通的添加dom元素 不是基于数据的，那么就用原生JS好了

Answer 2

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

本文地址 ：CodeGo.net/6864327/
-------------------------------------------------------------------------------------------------------------------------
1.重要的是，随着角，您不添加新行的表，但相反，修改模型的数据。当模型改变视图会自动更新。今天我向您显示在你的榜样是什么角会做HTML模板部分。你会不会修改这些DOM，而是要操纵模型。因此，这里有步骤 CodeGo.net，我建议： 创建一个控制器，你的表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，无效{背景色：#FEE;边框：纯红色1px的} 在“角路” 正如你所看到的，你正在做的任何DOM没有直接修改。你得到表单验证的所有烤的慈爱，而无需编写任何实际的代码。该控制器通过举办模式和曝光函数，其范围纯粹充当控制器。可以进一步利用这个向下的角度路径通过注入其中手柄检索服务和更新数据，而这些服务，然后共享。也许你已经做到这一点在你的代码，但这些代码应该为你的具体的例子，没有任何额外的依赖。
2. 你应该使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);
}
});

Answer 3

既然你使用了 ui-router，说明你的应用是 单页程序，既然是单页程序，首先要考虑动态路由是否有必要？只要根据用户角色 显示该角色可以访问的菜单即可，在每次路由切换的时候判断下是否有访问此路由的权限，没有就跳转到指定页面即可.

<script type="text/javascript">
    window.onload = function() {
        // 为 id = tab 的控件添加一行 <tr></tr>
        var row = tab.insertRow(-1);
        // 创建 th 列
        var cell_0 = document.createElement("th");
        // 设置他的 scope 属性为 row，设置他的 innerHTML 为 title
        cell_0.setAttribute("scope", "row");
        cell_0.innerHTML = "title";
        var cell_1 = document.createElement("th");
        cell_1.setAttribute("scope", "row");
        cell_1.innerHTML = "name";
         
        // 把创建好的 cell_0 和 cell_1 添加到 行中
        row.appendChild(cell_0);
        row.appendChild(cell_1);
        // 打印出当前 id=tab 的内容，可以看到， <tr><th scope="row">title</th><th scope="row">name</th></tr>
        alert(tab.innerHTML);
    };
</script>

Answer 4

1. 既然你使用了 ui-router，说明你的应用是 单页程序，既然是单页程序，首先要考虑动态路由是否有必要？只要根据用户角色 显示该角色可以访问的菜单即可，在每次路由切换的时候判断下是否有访问此路由的权限，没有就跳转到指定页面即可