javascript - Inline row editing using ng table - Stack Overflow

admin管理员组

文章数量:1426072

Hi Everyone,

I am trying to implementing inline row edit using ng table

When I click on edit icon then I changed the values then I click on save icon I am gettin below error

TypeError: Cannot read property 'untrack' of undefined

Please find plunker Inline row edit using ng table for details coding

<table
        class="alignment table table-striped table table-bordered table-hover table-condensed editable-table demoTable"
        ng-table="tableParams" ng-show="showTable" ng-form="tableForm"  demo-tracked-table="tableTracker">
        <colgroup>
        <col width="45%" />
        <col width="45%" />
        <col width="10%" />

    </colgroup>

    <tr ng-repeat="row in $data" ng-form="rowForm" demo-tracked-table-row="row">

        <td data-title="'INR Rate'" ng-switch="row.isEditing" ng-class="inrRate.$dirty ? 'bg-warning' : ''" ng-form="inrRate" demo-tracked-table-cell>
            <span ng-switch-default class="editable-text">{{row.INRRate}}</span>
            <div class="controls" ng-class="inrRate.$invalid && inrRate.$dirty ? 'has-error' : ''" ng-switch-when="true">
                <input  type="number" name="inrRate" ng-model="row.INRRate" class="editable-input form-control input-sm" required />
            </div>
        </td>

Hi Everyone,

I am trying to implementing inline row edit using ng table

When I click on edit icon then I changed the values then I click on save icon I am gettin below error

TypeError: Cannot read property 'untrack' of undefined

Please find plunker Inline row edit using ng table for details coding

<table
        class="alignment table table-striped table table-bordered table-hover table-condensed editable-table demoTable"
        ng-table="tableParams" ng-show="showTable" ng-form="tableForm"  demo-tracked-table="tableTracker">
        <colgroup>
        <col width="45%" />
        <col width="45%" />
        <col width="10%" />

    </colgroup>

    <tr ng-repeat="row in $data" ng-form="rowForm" demo-tracked-table-row="row">

        <td data-title="'INR Rate'" ng-switch="row.isEditing" ng-class="inrRate.$dirty ? 'bg-warning' : ''" ng-form="inrRate" demo-tracked-table-cell>
            <span ng-switch-default class="editable-text">{{row.INRRate}}</span>
            <div class="controls" ng-class="inrRate.$invalid && inrRate.$dirty ? 'has-error' : ''" ng-switch-when="true">
                <input  type="number" name="inrRate" ng-model="row.INRRate" class="editable-input form-control input-sm" required />
            </div>
        </td>

• javascript
• angularjs
• ngtable

Share Improve this question Follow edited Oct 30, 2015 at 17:48 Ravindhar Konka asked Oct 30, 2015 at 14:18 Ravindhar KonkaRavindhar Konka 15322 silver badges1313 bronze badges 1

• Are you able to solve this issue? is so please post your answer Thanks – Muddu Patil Commented Dec 9, 2015 at 6:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I met the same problem but no luck after investigation on sample code. I modified the code and it works fine until now.

1. Do not use "ngTableSimpleList". It is just a data set for table which defined in sample code by author.
2. It seems tableTracker.untrack(row) can be removed safely.

3. However,var originalRow = resetRow(row, rowForm); would get a nil value which cause the value doesn't recover correctly, since _.findWhere is an asynchronous method. So I replace it with for loop.

   function resetRow(row, rowForm) {
       row.isEditing = false;
       rowForm.$setPristine();
       //self.tableTracker.untrack(row);
       for ( let i in originalData){
           if(originalData[i].id === row.id){
               return originalData[i]
           }
       }
       //return _.findWhere(originalData, function(r) {
        //   return r.id === row.id;
       //});
   }
   

You were injecting NgTableParams instead of ngTableParams - see working: fixed example

demoController.$inject = ["ngTableParams", "ngTableSimpleList", "$scope"];

本文标签： javascriptInline row editing using ng tableStack Overflow