Question

现在，这可能是一个理论问题，因为我还在学习AngularJS，请原谅我愚蠢。

有没有办法让Angular调用来自不同位置的3个json文件，并且它们都具有相同的布局，然后进行一次调用＆＃34; compile＆＃34;或者＆＃34;加载＆＃34;它作为一个，增加加载时间？

假设我们有3个json文件：

第一个JSON文件：

{
   "name": "John",
   "sur": "Smith"
}

第二个JSON文件：

{  
   "name": "John", 
   "sur": "Doe"
}

第3个JSON文件：

{
    "name": "Alice",
    "sur": "Mulder"
}

使用ng-repeat调用它们然后显示它们的最有效和最快捷的方法是什么？从理论上讲，它们可以编译在一个临时的json文件中。就在我们决定使用表达式将它们输入到html之前？

Answer 1

最终，您需要将单个数组绑定到视图中。这个ng-repeat将迭代数组中的每个项目，并将每个对象打印成<pre/>：

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <div ng-repeat="entry in entries">
      <pre ng-bind="entry | json"></pre>
    </div>
  </div>
</div>

同时开始3个$http.get()个请求（显然您可以将这些请求更改为file1.json，file2.json等。

每个$http.get()承诺在完成时为我们提供response个对象。我们实际上需要response.data代替（给我们回复，解析为JSON），所以Array.prototype.map()您对response的每一个承诺，以便它成为response.data的承诺

然后使用$q.all()等待所有这些承诺完成。

$q.all()承诺完成后：我们有一系列JSON响应。将该模型添加到我们的$scope。

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope, $http, $q) {
    $q.all(
      [
      $http.get('https://httpbin.org/get'),
      $http.get('https://httpbin.org/get'),
      $http.get('https://httpbin.org/get')
      ]
      .map(function(promise) {
        return promise
        .success(function(response) {
            return response.data;
        })
      })
    )
    .then(function(multipleJson) {
        $scope.entries = multipleJson;
    })
});

Plunkr here。

调用一个编译多个JSON文件

1 个答案: