2

I'm working on an invoice website and I would like to be able to add a new row anywhere to my ng-repeat.

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

This adds a new row to the bottom of the ng-repeat. Is it even possible to add a new row anywhere in the ng-repeat? I'm having a hard time trying to figure this out.

1
  • Instead of pushing an item onto $scope.invoice.items, did you try slicing items and then concatenating the pieces together with the one you want to add in the middle? Sep 25, 2013 at 4:42

3 Answers 3

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

You can check splice working exampe @ http://www.w3schools.com/jsref/jsref_splice.asp

1
  • will it regenerate the DOM for all items? or it will just add?
    – coure2011
    May 21, 2014 at 16:54
0

Use splice instead of push.

For example:

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

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice for details

0

you can use like this

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.