Comment lier plusieurs fichiers JSON dans ng-repeat (AngularJS)?

J'ai plusieurs fichiers JSON:

Main.json:

{ "MainRegister": [ { "name": "Name1", "url": "url1.json", }, { "name": "Name2", "url": "url2.json", }, ] }

Url1.json

 { "SubInformation": { "description": "Hello World 1", "identifier": "id1", } }

Url2.json

 { "SubInformation": { "description": "Hello World 2", "identifier": "id2", } }

Maintenant, je veux créer un ng-repeat div dans mon index.html de sorte qu'il charge tous les champs des fichiers, de plus je veux afficher la sortie suivante:

Nom1 : Bonjour Monde 1 ( id1 )
Name2 : Hello World 2 ( id2 )

Comment puis-je lier ces fichiers de manière ng-repeat? Ou est-ce qu'il y a une autre façon?

Vous devez les charger d'abord, puis configurer une variable d'étendue qui contient les données nécessaires dans un tableau. Vous pouvez faire le $http dans votre contrôleur (comme dans l'exemple ci-dessous), mais s'il s'agit de quelque chose de réutilisable ou plus qu'une application simple, je vous recommande de le faire dans un service injecté.

 .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); }); }); }); });

Et votre modèle peut ressembler à

 <div ng-repeat="entry in entries"> <span>{{entry.name}}: {{entry.description}} ({{entry.id}})</span> </div>

Vous pouvez utiliser des filtres si vous souhaitez les commander, ou charger les ensembles de $scope.entries dans une commande particulière, ou si vous ne souhaitez afficher aucune entrée tant que toutes ne sont pas prêtes, vous pouvez définir un ensemble prêt ou uniquement $scope.entries à la fin, etc.

Permettez-moi d'ajouter que je n'aime pas ce genre d'appels intégrés plus profonds et plus profonds, ainsi que la série d'entre eux, mais c'est une question de style. Je suis devenu un grand fan de la bibliothèque asynchrone de Caolan pour rendre le code de contrôleur ci-dessus beaucoup plus propre. http://github.com/caolan/async

La manière simple:

Analogique à l'énoncé UNION de SQL ANSI.

Pour plus d'informations, consultez l'exemple de https://docs.angularjs.org/api/ng/directive/ngInit

 <script> angular.module('initExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.list = [['a', 'b'], ['c', 'd']]; }]); </script> <div ng-controller="ExampleController"> <div ng-repeat="innerList in list" ng-init="outerIndex = $index"> <div ng-repeat="value in innerList" ng-init="innerIndex = $index"> <span class="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span> </div> </div> </div>

Résultat:

 list[ 0 ][ 0 ] = a; list[ 0 ][ 1 ] = b; list[ 1 ][ 0 ] = c; list[ 1 ][ 1 ] = d;