Angular Editable table not working with ng-repeat

Question

<table class="table table-bordered">
    <tbody>
        <tr ng-repeat="playerOrTeam in template.editableTable track by $index">
            <td style="text-align: center;" ng-repeat="playerOrTeamCat in playerOrTeam track by $index">
                <input ng-model="playerOrTeamCat" type="text" class="form-control input-sm">
            </td>
        </tr>
    </tbody>
</table>

template.editableTable is a multi dimensional array just filled with standard variables. when I change one of the values in the input box and then i look at the output of the template.editable table, i don't see the changes. Am I missing something obvious?

EDIT with more details because i'm getting no responses =\

//Template Class
app.factory('Template', function () {
    var Template = function () {
          /*
          * Public Variables
          */
          this.editableTable = someMultiDimensionalTable;
      }

      /*
      * Functions
      */
      Template.prototype.SeeEditableTableContents = function () {
        console.log(this.editableTable);
      }
 }

//Main Controller
app.controller('MainController', function () {
  $scope.template = new Template();
  //etc
}

does calling $scope.digest() or $scope.apply() work after you make a change to this.editableTable? — derp
– derp, Commented Dec 13, 2016 at 0:17
i tried calling $scope.apply and the console told me that it was already being applied =\ — user1189352
– user1189352, Commented Dec 13, 2016 at 0:19

jegtugado · Accepted Answer · 2016-12-13 00:20:03Z

1

You cannot perform direct in-line modifications within ng-repeat. You can update your array entry using a function.

You'd want something like:

$scope.saveEntry = function (idx) {
    console.log("Saving entry");
    $scope.template.editableTable[idx] = angular.copy($scope.model.selected);
    $scope.reset();
};

See JSFiddle for sample.

answered Dec 13, 2016 at 0:20

jegtugado

5,1511 gold badge14 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:45:43Z

okay i actually got it to work so that i CAN make direct in-line modifications with ng-repeat by making my multidimensional table full of objects rather than soley a value.

so by doing that, i modified the table to look like this

<table class="table table-bordered">
    <tbody>
        <tr ng-repeat="playerOrTeam in template.editableTable track by $index">
            <td style="text-align: center;" ng-repeat="playerOrTeamCat in playerOrTeam track by $index">
                <input ng-model="playerOrTeamCat.value" type="text" class="form-control input-sm">
            </td>
        </tr>
    </tbody>
</table>

got the idea looking here Modifying objects within Angular Scope inside ng-repeat

Collectives™ on Stack Overflow

Angular Editable table not working with ng-repeat

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related