如何在 ng-repeat (AngularJS) 中绑定多个 JSON 文件? [英] How to bind multiple JSON files in ng-repeat (AngularJS)?

问题描述

我有多个 JSON 文件:

ma​​in.json:

<代码>{主寄存器":[{"name": "Name1","url": "url1.json",},{"name": "Name2","url": "url2.json",},]}

url1.json

<代码>{子信息":{"description": "Hello World 1",标识符":id1"，}}

url2.json

<代码>{子信息":{"description": "Hello World 2",标识符":id2"，}}

现在我想在我的 index.html 中创建一个 ng-repeat div 以便它加载文件中的所有字段，而且我想显示以下输出:

• Name1:Hello World 1 (id1)
• Name2:Hello World 2 (id2)

如何以 ng-repeat 方式绑定这些文件?或者还有其他方法吗?

解决方案

您需要先加载它们，然后设置一个范围变量，该变量包含数组中的必要数据.您可以在控制器中执行 $http get(如下例所示)，但如果它是可重用的或不仅仅是一个简单的应用程序，我建议在注入的服务中执行此操作.>

.controller('MyCtrl', function($scope,$http){$scope.entries = [];$http.get('main.json').success(function(data) {angular.forEach(data.MainRegister,function(entry) {$http.get(entry.url).成功(功能(数据){$scope.entries.push(angular.extend(entry,data.SubInformation);});});});});

然后你的模板看起来像

<span>{{entry.name}}:{{entry.description}} ({{entry.id}})</span>

如果您想对它们进行排序，或者以特定顺序加载 $scope.entries，或者如果您不想在所有条目都准备就绪之前显示任何条目，则可以使用过滤器，然后你可以设置一个ready var，或者只在最后设置$scope.entries，等等.

让我补充一点，我不喜欢那种越来越深的嵌入ajax调用，以及它们的系列，但这是一个风格问题.我已经成为 caolan 的异步库的忠实粉丝，它使上述控制器代码更加清晰.http://github.com/caolan/async

I have multiple JSON files:

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",
  }
}

Now I want to create a ng-repeat div in my index.html such that it loads all the fields from the files, moreover I want to display the following output:

• Name1: Hello World 1 (id1)
• Name2: Hello World 2 (id2)

How can I bind these files in a ng-repeat way? Or is there another way?

解决方案

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

<div ng-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

这篇关于如何在 ng-repeat (AngularJS) 中绑定多个 JSON 文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！