Ka Mok Ka Mok - 3 months ago 12
AngularJS Question

How to set many unique two-way binding ng-model inside nested ng-repeats (table) in Angular JS?

Link to Plunkr.

I want to be able to uniquely change the model of each

values
, but currently when I type inside the any form field, all of them change.

Basically, I have a table created using two ng-repeats for rows and columns.

<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>


When the angular is init, I run a clearBoard() function which sets the default data structure of
solved
to this:

$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]]
};


I initially started with
ng-model="cell.value"
but changed to the current solution when I thought that the
rowIndex
and
$index
would be able to identify the correct cell.

This part is just for clarity sake for you. It's not in my production.

{{$index}}
{{rowIndex}}

Answer

When you use the variable blank in each array slot, it is actually referencing the same object, which is why they all change together. Your tracking by $index is working! Try this to load your array with separate objects instead:

$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 }]]

Link to working Plunk: https://plnkr.co/edit/dfnNcFFsh53Hwb4gdf9r?p=preview

Comments