Angularjs 在ng重复中的任意位置注入新行
我在一个发票网站上工作,我希望能够在我的ng repeat的任何地方添加一个新行 地点: HTMLAngularjs 在ng重复中的任意位置注入新行,angularjs,angularjs-ng-repeat,Angularjs,Angularjs Ng Repeat,我在一个发票网站上工作,我希望能够在我的ng repeat的任何地方添加一个新行 地点: HTML <tr id="row-{{$index+1}}" class="item-row" ng-repeat="item in invoice.items"> <td class="col-span2">@Html.TextBoxFor(m => m.InvoiceColOneDetails, new { id = "cel1-row{{$index+1}}",
<tr id="row-{{$index+1}}" class="item-row" ng-repeat="item in invoice.items">
<td class="col-span2">@Html.TextBoxFor(m => m.InvoiceColOneDetails, new { id = "cel1-row{{$index+1}}", @class = "invoiceColOneDetails", @placeholder = "{{$index+1}}" })</td>
<td class="col-span6">
<textarea id="cel2-{{$index+1}}" class="invoiceColTwoDetails" ng-model="item.description" auto-grow></textarea>
</td>
<td class="col-span1">@Html.TextBoxFor(m => m.InvoiceColThreeDetails, new { id = "cel3-row{{$index+1}}", @class = "invoiceColThreeDetails text-center", @placeholder = "0", @ng_model = "item.hrsQty" })</td>
<td class="col-span1">@Html.TextBoxFor(m => m.InvoiceColFourDetails, new { id = "cel4-row{{$index+1}}", @class = "invoiceColFourDetails text-center", @placeholder = "0", @ng_model = "item.ratePrice" })</td>
<td class="col-span2 relative disabled-field">@Html.TextBoxFor(m => m.InvoiceColFiveDetails, new { id = "cel5-row{{$index+1}}", @class = "invoiceColFiveDetails text-right", @placeholder = "0", @Value = "{{rowTotal(item) | currency}}", @disabled = "disabled" })</td>
<td class="no-border disabled-field remove-row">
<a href="javascript:void(0)" class="remove-item tooltip-right" title="Delete row (Ctrl+Delete)" ng-click="deleteRow($index)">
<i class="icon-remove-sign"></i>
</a>
<a href="javascript:void(0)" class="remove-item tooltip-right" title="Insert new row" ng-click="insertRow($index)">
<i class="icon-add-sign"></i>
</a>
</td>
</tr>
这将在ng repeat的底部添加一个新行。甚至可以在ng repeat中的任何位置添加新行吗?我很难弄明白这一点。使用
splice
而不是push
例如:
> a = [0,1,2]
[0, 1, 2]
> a.splice(1,0,3) // insert 3 at index 1
[]
> a
[0, 3, 1, 2]
有关详细信息,请参阅
$scope.insertRow = function (index) {
var obj={
description: null,
hrsQty: null,
ratePrice: null
};
$scope.invoice.items.splice(index,0,obj)
};
您可以检查拼接工作示例@您可以这样使用
$scope.insertRow = function (index) {
var item ={
description: '',
hrsQty: 0,
ratePrice: 0
};
$scope.invoice.items.splice(index,0,item)
};
而不是将一个项目推到
$scope.insertRow = function (index) {
var item ={
description: '',
hrsQty: 0,
ratePrice: 0
};
$scope.invoice.items.splice(index,0,item)
};