3

プロジェクトの編集を使用して、簡単なデータ グリッド ディレクティブを作成しようとしています。コード sans ディレクティブは次のとおりです。

HTML

<div>&nbsp;</div>
<div ng-app="app">
  <div ng-controller="ctrl">
    <table class=pure-table pure-table-striped>
      <tr ng-repeat="row in data">
        <td ng-repeat="col in row"><input ng-model="col"></td>
      </tr>
    </table>
    <p>{{data}}</p>
  </div>
</div>

JS

var app = angular.module('app', []);

app.controller('ctrl', function ($scope) {  
  $scope.data = [
    [100, 200, 300],
    [400, 500, 600]
  ];
});

CSS

td input { border: none; text-align: right; width: 5em; }

コードペン: http://codepen.io/mikeward/pen/gwcjt

これは、双方向バインディングを使用しているにもかかわらず、データモデルが更新されないことを除いて、「ほぼ」機能します（現時点では一方向として動作しています）。これはAngularのバグですか、それとも私が何かを理解していないだけですか?

4

1 に答える 1

4

ng-model="row[$index]"の代わりに書いてくださいng-model="col"。

理由はよくわかりませんが、これは Forms と Inputs の同様の問題に似ているようです。入力によって子スコープが作成されると思います。colは単なるスカラー変数であるため、スコープがコピーされるcolと、コピー内の は完全に別の変数になります。したがって、 のコピーを変更してもcol、オリジナルは変更されません。row一方、 は非スカラー変数であり、これは「参照」によって「コピー」されるためrow、入力を変更すると元の も変更されrowます。

AngularJS の人々は、スカラー変数を持つng-modelことは間違っていると強調しています。彼らは、にドットがあるべきだとアドバイスしていng-modelます。row[$index]ドットは含まれていませんが、基本的には最初row.$indexに$index補間されています。

于 2013-10-03T22:17:50.713 に答える