update object using nested ng-repeat

Question

JSON structure,

[
{'col 1':'false','col 2':'false','col 3':'false'},
{'col 1':'false','col 2':'false','col 3':'false'},
{'col 1':'false','col 2':'false','col 3':'false'},
{'col 1':'false','col 2':'false','col 3':'false'}
]

Please note the key have space in it. In controller i'm changing it to a scope object as,

$scope.myArr = angular.fromJson(jsonStringAsAbove);

My html code,

<div class='row' data-ng-repeat='i in myArr'>
    <table class='col-xs-12' style='overflow:auto;border:1px solid black;' >
       <tr>
          <td style='width:100px;' data-ng-repeat='o in i'>
             <input type='checkbox' data-ng-model='o' />
          </td>
       </tr>
    </table>
</div>

But, if I select the check box, the myArr is not changed properly. I suspect the data-ng-model which I'm binding to the input element is not proper. How can I bind the input element so that the original array will be updated to true or false based on the check box selected?

JB Nizet · Accepted Answer · 2015-08-30 14:17:04Z

1

Lets' start by rewriting the code by giving proper names instead of i and o:

<div class='row' data-ng-repeat='row in myArr'>
    <table class='col-xs-12' style='overflow:auto;border:1px solid black;' >
       <tr>
          <td style='width:100px;' data-ng-repeat='column in row'>
             <input type='checkbox' data-ng-model='column' />
          </td>
       </tr>
    </table>
</div>

This might look useless, but it makes things much easier to read, understand and maintain for everyone, including you.

Now let's look at the problems:

`data-ng-repeat='column in row'`

you can't iterate on row like that. row is an object with 3 fields, not an array.

The correct way to iterate over entries of an object is

`data-ng-repeat="(columnName, columnValue) in row`

Now you want the checkbox to be bound to the field of row that has the current column name, so the input should be

<input type='checkbox' data-ng-model='row[columnName]' />

Note, however, that the model of a checkbox is supposed to be a boolean, and not a string as your objects contain. The array should be defined as

[
    {'col 1': false, 'col 2': false, 'col 3': false},
    {'col 1': false, 'col 2': false, 'col 3': false},
    {'col 1': false, 'col 2': false, 'col 3': false},
    {'col 1': false, 'col 2': false, 'col 3': false}
]

Working plunkr: http://plnkr.co/edit/9PA1sG5FiicY9Xl2toe1?p=preview

answered Aug 30, 2015 at 14:17

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JPS Over a year ago

Thank you. Wasted 4 hours for a simple mistake. You have mentioned that the array should be defined with boolean instead of string. But when you use angular.fromJson it doesn't convert string to boolean automatically. should i have to iterate and convert it manually then?

JB Nizet Over a year ago

You should fix the code that generates this JSON incorrectly. Why store a boolean as a string?

Collectives™ on Stack Overflow

update object using nested ng-repeat

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related