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() 函数也不起作用。我也仍然无法编辑文本框的值。

tl;dr：我怎样才能拥有一个带有 an 的文本框ng-model并允许对其进行编辑以编辑文本框值和 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;" />

columnthis 有效而 using无效的原因是：<input>标签将通过复制父范围来创建子范围。但是column是一个简单/标量变量。这样的变量实际上只会被复制。因此，您最终会得到一个副本，ng:model其中未连接到矩阵中的实变量。这就是为什么 AngularJS 的人强调你应该总是有一个里面有一个点的东西引用的原因ng-model。

另一方面，row仍然是复变量（数组）而不是标量。JavaScript 不是通过创建真正的副本而是通过复制对数据的引用来“复制”这样的变量。因此，您最终会获得对相同数据的第二次引用。因此row，在标签创建的子范围内，<input>仍然连接到矩阵中的原始行数据，并且双向数据绑定将起作用。

再次强调这一点：永远不要使用没有点的东西作为ng:model. AngularJS 曾经在他们的网页上有过这样做的不好的例子，但似乎它们大部分/全部都被改变了。但是正如你在这个例子中看到的那样，有些东西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 回答