3 
  <p ng-repeat="row in matrix">
    <span ng-repeat="column in row">
      <input type="text" style="width: 20px; text-align: center;" ng-model="column" ng-change="{{column = }}">
    </span>
  </p>

そして私のコントローラーで：

$scope.matrix = [[0, 0, 0], [0, 0, 0], [0, 0, 0]];

私はコードがほとんどなく、その小さなテキスト入力ボックスを に関連付けたいと思っていますmatrix[i][u]。ng-model=テキストボックスを特定の変数に関連付けるために使用できることはわかっています。

ただし、変数を変更するとテキスト ボックスの値が変更され、テキスト ボックスの値を変更すると変数が変更されます。ただし、ng-model入力テキスト ボックスをオンにすると、常にデフォルトに「リセット」されるため、その値を編集できないようです。

使用できることはわかっていますng-changeが、中間行を次のようにしました。

<input type="text" style="width: 20px; text-align: center;" ng-model="column" ng-change="update">

そして、 $scope.update() 関数を呼び出すことはできませんでした。また、テキスト ボックスの値を編集することもできません。

ng-modeltl;dr: テキスト ボックスを編集して、テキスト ボックスの値と ng-model の変数の両方を編集できるようにするにはどうすればよいですか。

4

3 に答える 3

13

次のように使用します。

<input type="text" ng-model="matrix[$index][$parent.$index]" style="width: 20px; text-align: center;" />

例: http://jsfiddle.net/cherniv/hcLVE/

あまりエレガントではありませんが、機能しています..

于 2013-10-17T16:47:29.833 に答える
4

使用する

row[$index]

ng:model入力タグのように：

<input type="text" ng-model="row[$index]" style="width: 20px; text-align: center;" />

columnこれが機能し、使用が機能しない理由は次のとおりです。<input>タグは、親スコープをコピーして子スコープを作成します。しかしcolumn、単純/スカラー変数です。このような変数は、実際にはコピーされるだけです。ng:modelしたがって、行列の実際の変数に接続されていないコピーになります。これが、AngularJS の人々が、常にng-model.

一方、rowは依然として複雑な変数 (配列) であり、スカラーではありません。このような変数は、実際のコピーを作成するのではなく、データへの参照をコピーするだけで、JavaScript によって「コピー」されます。したがって、同じデータへの 2 番目の参照が発生します。したがってrow、タグによって作成された子スコープ<input>では、マトリックス内の元の行データに接続されたままになり、双方向のデータ バインディングが機能します。

これをもう一度強調すると、ドットのないものを として使用しないでくださいng:model。AngularJS の Web ページにはこれを行う悪い例がありましたが、ほとんどまたはすべてが変更されたようです。しかし、この例でわかるようにfoo[5]、まだ複雑な変数を参照しているため、問題はありません。foo["bar"]実際には と等しくなりfoo.barます。

于 2013-10-17T17:14:18.110 に答える
4

もう少し楽しいディレクティブアプローチを次に示します。

app.directive("matrix", function($compile){
 return{
 scope:{
   ngModel:'='
 },
 restrict:"E",
 link:function(scope, element, attributes){
   var render = function(){
    var template="";
    scope.ngModel.forEach(function(row, r){
      template+="<p>";
      console.log(scope.ngModel[r]);
      row.forEach(function(column, c){
        template+='<span><input style="width: 20px; text-align: center;" ng-model="ngModel['+r+']['+c+']"></span>';
      });
      template+="</p>";
    });
    element.html(template);
    $compile(element.contents())(scope);
  }
  render();
  scope.$watch('ngModel', render, true);
 }
}
});

使用できる<matrix ng-model="matrix"></matrix>

ディレクティブが好きだからです。ここで実行: http://plnkr.co/edit/jI7Hi9LKXnDFBd0gXtNZ?p=preview

于 2013-10-17T16:54:24.590 に答える