CODEWITHSUNDEEP
javascriptangularjsloopsmodelnested
Spanky
Spanky

Reputation: 5776

AngularJS: How do I bind data in nested ng-repeats?

I've got a pretty deeply nested JSON object being returned from an $http call, using Angular. In my template, I have to nest a few ng-repeats to get present the data. I can't seem to figure out how to bind the data using ng-model on a text input.

I read this question which said that the return object isn't automatically data in the $scope, and you have to loop through the data and instantiate the structure. I tried that as well with the same outcome. 

        // Seemingly unnecessary code
        angular.forEach(Object.keys($scope.sources), function(sourcename){
            $scope.sourceData[sourcename] = {};
            angular.forEach(Object.keys($scope.sources[sourcename]), function(key){
                $scope.sourceData[sourcename][key] = $scope.sources[sourcename][key];
        });

Here's a fiddle showing my attempts:

http://jsfiddle.net/c7z9C/2/

I just want the values to be populated in the fields and bound to the model. Thanks in advance for any advice.

Upvotes: 1

Views: 1416

Answers (1)

Davin Tryon
Davin Tryon

Reputation: 67296

The HTML in your example was just a little off.

Here is a working fiddle.

The "not working" input just has some code in the ng-model that wasn't working.

First off, you don't need to interpolate {{ }} inside Angular directive attributes. So, this includes ng-model. So the {{key}} isn't necessary.

Also, sourceData was misspelled. It was supposed to be sourcedata and case matters.

So the end result for the ng-model is ng-model="sourcedata[key]":

    <li ng-repeat="(key,value) in sourcedata">
        WORKS: <input type="text" value="{{value}}" /><br/>
        DOESN'T: <input type="text" ng-model="sourcedata[key]" />
    </li>

Upvotes: 3

Related Questions