How should I bind values of an object inside an ng-repeat?

Question

I have a complex object that I wish to display and edit in my page.

More specifically for my actual case, I have an object that has a <string, array> pair, where array is actually a collection of objects with various <string, int> pairs.

I try to iterate over this complex structure like this:

      <div data-ng-repeat="(key, table) in TestData">
            <h3>{{key}}</h3>

            <table class="responsive-table">                    
                <tbody>
                    <tr data-ng-repeat="row in table">
                        <td data-ng-repeat="(label, value) in row" data-title="label">
                            <div>
                                <input data-ng-model="TestData[key][?][label]" data-ng-readonly="isEditable(label)" data-ng-change="show()" />                                    
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>

There seems to be no way for me to find what value I should use in my model because I cant get my exact item in the structure inside the second repeat.

Is there a way to achieve what I want?

Possible duplicate of [Binding inputs to an array of primitives using ngRepeat => uneditable inputs](http://stackoverflow.com/questions/15488342/binding-inputs-to-an-array-of-primitives-using-ngrepeat-uneditable-inputs) — basilikum, Dec 16 '15 at 12:50

Johannes Jander · Answer 1 · 2016-01-10T11:39:56.877

2

Rewrite the show() function:

$scope.show= function (row) {
   console.log("Test: ", row);
}

and change the ngChange-Handler to data-ng-change="show(row);. This way, you can update your model in the show-function.

edited Jan 10 '16 at 11:39

answered Dec 16 '15 at 12:46

Johannes Jander

4,974
2
31
46

score 2 · Answer 2 · answered Dec 16 '15 at 12:49

2

You should not bind directly to primitives. What you can do is use $index to bind to the array item instead:

<div ng-repeat="item in test track by $index">
   <input data-ng-model="test[$index]" data-ng-change="show()" />
</div>

answered Dec 16 '15 at 12:49

basilikum

10,378
5
45
58

Also, this question seems to be a duplicate: http://stackoverflow.com/questions/15488342/binding-inputs-to-an-array-of-primitives-using-ngrepeat-uneditable-inputs – basilikum Dec 16 '15 at 12:50
It quite probably is a duplicate. Let me edit it and make it more specific. – dearn44 Dec 16 '15 at 13:00
edited to reflect my actual problem, I should have typed that from the beginning. – dearn44 Dec 16 '15 at 13:10

score 0 · Answer 3 · answered Dec 16 '15 at 12:45

0

Inside the ng-repeat there exists an own scope you can use

$scope.show= function () {
   console.log("Test: ", $scope.$parent.test);
};

to receive the result you expect

answered Dec 16 '15 at 12:45

Ced

1,301
11
30

How should I bind values of an object inside an ng-repeat?

3 Answers3