天道酬勤,学无止境

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

问题

我有多个 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,以便它加载文件中的所有字段,而且我想显示以下输出:

  • Name1Hello World 1 ( id1 )
  • Name2Hello World 2 ( id2 )

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

回答1

您需要先加载它们,然后设置一个包含数组中必要数据的范围变量。 您可以在控制器中执行$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).
          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 ,或者如果你不想在所有条目都准备好之前显示任何条目,那么你可以设置一个就绪变量,或者只设置$scope.entries在最后,等等。

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

回答2

简单的方法:

类似于 SQL ANSI 的 UNION 语句。

有关更多信息,请参阅 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>

结果:

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

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐