Question

链接到Plunkr。

我希望能够唯一地更改每个values的模型，但是当我在任何表单字段中输入时，所有这些都会发生变化。

基本上，我有一个使用两个ng-repeats为行和列创建的表。

<table>
   <tr ng-repeat="row in solved track by $index" ng-init= "rowIndex = $index">
      <td ng-repeat ="cell in row track by $index">
        <form>
           <input ng-model="solved[rowIndex][$index].value" type="number"/>
        </form>
      </td>
   </tr>
</table>

当angular是init时，我运行一个clearBoard（）函数，它将solved的默认数据结构设置为：

$scope.clearBoard = function() {
    var blank = { value: null }
    $scope.solved = [
    [blank,blank,blank,blank,blank,blank,blank,blank,blank],
    [blank,blank,blank,blank,blank,blank,blank,blank,blank],
    [blank,blank,blank,blank,blank,blank,blank,blank,blank],
    [blank,blank,blank,blank,blank,blank,blank,blank,blank],
    [blank,blank,blank,blank,blank,blank,blank,blank,blank],
    [blank,blank,blank,blank,blank,blank,blank,blank,blank],
    [blank,blank,blank,blank,blank,blank,blank,blank,blank],
    [blank,blank,blank,blank,blank,blank,blank,blank,blank],
    [blank,blank,blank,blank,blank,blank,blank,blank,blank]]
};

我最初使用ng-model="cell.value"开始，但当我认为rowIndex和$index能够识别正确的单元格时，我更改为当前的解决方案。

这部分只是为了您的清晰。它不在我的作品中。

{{$index}}
{{rowIndex}}

更新：我还提出了一种使用underscoreJS初始化空板的方法。

$scope.clearBoard = function() {
    var solved = [];
    var empty = { value: null };

    _(9).times(function() {
        var row = [];
        _(9).times(function() {
            row.push(_.clone(empty))
        });
        solved.push(row)
    });

    $scope.solved = solved;
};

Answer 1

当你在每个数组槽中使用变量blank时，它实际上引用了同一个对象，这就是它们一起变化的原因。您$index的跟踪工作正常！尝试使用单独的对象加载数组：

$scope.solved = [
    [{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null }],
    [{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null }],
    [{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null }],
    [{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null }],
    [{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null }],
    [{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null }],
    [{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null }],
    [{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null }],
    [{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null },{ value: null }]]

链接到工作人员Plunk：https://plnkr.co/edit/dfnNcFFsh53Hwb4gdf9r?p=preview

更新：这是DRYer的方法：

// init the array
$scope.solved = [];

// define number of rows and cols
var cols = 9; 
var rows = 9;

// generate rows
for(var i = 0; i < rows; i++) {

    // init an array for each row
    $scope.solved[i] = [];

    // generate columns
    for(var j = 0; j < cols; j++) {

        $scope.solved[i].push({ value: null });
    }
}

如何在Angular JS中的嵌套ng-repeats（表）中设置许多独特的双向绑定ng-model？

1 个答案: