Question

如何动态添加行使用angularjs表

若以下回答无法解决问题，邀请你更新回答

Answer 1

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

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