javascript-如何在ng-repeat(AngularJS)中绑定多个JSON文件？

我有多个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",
  }
}

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

>名称1：Hello World 1(id1)
>名称2：Hello World 2(id2)

如何以ng-repeat方式绑定这些文件？还是有另一种方法？

解决方法:

您需要先加载它们,然后设置一个范围变量,该变量在数组中包含必需的数据.您可以在控制器中完成$http的获取(如下例所示),但是如果它可以重用或者比简单的应用程序还要多,我建议您在注入服务中使用.

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

然后您的模板可以看起来像

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

如果要订购过滤器,或以特定顺序加载$scope.entries,或者如果在所有准备就绪之前不显示任何条目,则可以使用过滤器,则可以设置一个就绪的var,或仅设置$scope.entries结尾,依此类推.

让我补充一点,我不喜欢这种越来越深的嵌入式ajax调用以及它们的系列,但这是样式问题.我已成为caolan异步库的忠实拥护者,以使上述控制器代码更加简洁. http://github.com/caolan/async

标签：angularjs,angularjs-ng-repeat,json,javascript
来源： https://codeday.me/bug/20191028/1955984.html