2

我正在开发一个发票网站，我希望能够在我的 ng-repeat 的任何地方添加一个新行。

网站：http ://completeinvoice.com/

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}}", @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>

Angularjs

$scope.insertRow = function (index) {
    $scope.invoice.items.push({
        description: null,
        hrsQty: null,
        ratePrice: null
    });
};

这会在 ng-repeat 的底部添加一个新行。是否可以在 ng-repeat 的任何位置添加新行？我很难弄清楚这一点。

4

3 回答 3

2 
$scope.insertRow = function (index) {
var obj={
        description: null,
        hrsQty: null,
        ratePrice: null
    };
    $scope.invoice.items.splice(index,0,obj)
};

您可以查看拼接工作示例@ http://www.w3schools.com/jsref/jsref_splice.asp

于 2013-09-25T05:38:11.607 回答
0

使用splice而不是push.

例如：

> a = [0,1,2]
[0, 1, 2]
> a.splice(1,0,3) // insert 3 at index 1
[]
> a
[0, 3, 1, 2]

有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

于 2013-09-25T05:37:14.587 回答
0

你可以这样使用

  $scope.insertRow = function (index) {
    var item ={
    description: '',
    hrsQty: 0,
    ratePrice: 0
};
$scope.invoice.items.splice(index,0,item)
       };
于 2013-09-30T08:26:18.800 回答