How To Bind Multiple Json Files In Ng-repeat (angularjs)?
Solution 1:
You need to load them first, then set up a scope variable that contains the necessary data in an array. You can do the $http
get in your controller (as in the example below), but if it is anything reusable or more than a simple app, I would recommend doing it in an injected service.
.controller('MyCtrl', function($scope,$http){
$scope.entries = [];
$http.get('main.json').success(function(data) {
angular.forEach(data.MainRegister,function(entry) {
$http.get(entry.url).
success(function(data) {
$scope.entries.push(angular.extend(entry,data.SubInformation);
});
});
});
});
and then your template can look something like
<divng-repeat="entry in entries"><span>{{entry.name}}: {{entry.description}} ({{entry.id}})</span></div>
You can use filters if you want to order them, or load the $scope.entries
in a particular order, or if you don't want to show any entries until all are ready, then you can set a ready var, or only set $scope.entries
at the end, etc.
Let me add that I don't like that kind of deeper and deeper embedded ajax calls, as well as the series of them, but it is a question of style. I have become a big fan of caolan's async library for making the above controller code far cleaner. http://github.com/caolan/async
Solution 2:
The Simple Way:
Analog to UNION statement of SQL ANSI.
For more information, see the example of https://docs.angularjs.org/api/ng/directive/ngInit
<script>
angular.module('initExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.list = [['a', 'b'], ['c', 'd']];
}]);
</script><divng-controller="ExampleController"><divng-repeat="innerList in list"ng-init="outerIndex = $index"><divng-repeat="value in innerList"ng-init="innerIndex = $index"><spanclass="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span></div></div></div>
Result:
list[0][0]= a;
list[0][1]= b;
list[1][0]=c;
list[1][1]= d;
Post a Comment for "How To Bind Multiple Json Files In Ng-repeat (angularjs)?"