角度可编辑表不使用ng-repeat

时间:2016-12-12 23:26:02

标签: javascript angularjs

<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是一个只用标准变量填充的多维数组。当我更改输入框中的一个值,然后我查看template.editable表的输出时,我没有看到更改。我错过了一些明显的东西吗?

编辑更多细节,因为我没有得到任何回复= \

//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
}

2 个答案:

答案 0 :(得分:1)

您无法在ng-repeat中执行直接内联修改。您可以使用函数更新数组条目。

你想要的东西是:

b

请参阅JSFiddle了解样本。

答案 1 :(得分:0)

好吧,我实际上让它工作,这样我就可以通过使我的多维表充满对象而不是soley值来直接进行ng-repeat的内联修改。

通过这样做,我修改了表格看起来像这样

<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>

看到了这个想法 Modifying objects within Angular Scope inside ng-repeat