【问题标题】:Angular Editable table not working with ng-repeatAngular 可编辑表不适用于 ng-repeat
【发布时间】:2016-12-13 08:25:33
【问题描述】:
<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
}

【问题讨论】:

  • 对 this.editableTable 进行更改后调用 $scope.digest() 或 $scope.apply() 是否有效?
  • 我尝试调用 $scope.apply 并且控制台告诉我它已经被应用 =\

标签: javascript angularjs


【解决方案1】:

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

你会想要这样的:

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

有关示例,请参阅 JSFiddle

【讨论】:

    【解决方案2】:

    好的,我实际上让它工作了,这样我就可以通过使我的多维表充满对象而不是单独一个值来使用 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

    【讨论】:

      猜你喜欢
      • 2018-07-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-05-27
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多