Question

在Angular中这样的事情是可能的，我尝试过搜索，但我不知道要搜索的确切术语，所以首先，我道歉。

我正在成功使用Angular来访问JSON文件。

我的JSON文件包含超过150个事件的列表，每个事件都有一些基本信息，如图像，标题，价格，事件是否已售罄等。

每个事件还包含有关该事件的JSON文件的URL。此文件包含有关个别事件的更多深入信息，例如位置，难度，轮椅无障碍等。

如何循环使用第一个JSON但仍然提取“嵌入”的信息？ JSON文件，以便在一个页面上显示所有信息。

我很难理解如何在ng-repeat中“调用”第二个JSON信息文件。

作为Angular的初学者，我努力寻找正确的术语来帮助自己。

感谢

EDITED -----

我在这里创造了一个我想要实现的部分内容。

http://plnkr.co/edit/zYAhNKdM18pxuK5roPjj?p=preview

<!DOCTYPE html>
<html>


<head>
<style>
#event-list span{display:block;}
#event-list li{clear:both;}
#event-list ul{list-style: none;}
#event-list img{float:left;}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("exampleApp", []);

app.controller("eventCtrl", function ($scope, $http, $location) {

  var eventList = "http://ajax.wiggle.co.uk/api/list/events/?ris=1";

  $scope.host = $location.host;
  $scope.wiggleEvents = [];


  $http({
      method: 'JSONP',
      url: eventList + '&callback=JSON_CALLBACK'
  }).success(function (data, status, headers, config) {
      $scope.wiggleEvents = data.Results.Products;


      // data contains the response
      // status is the HTTP status
      // headers is the header getter function
      // config is the object that was used to create the HTTP request
  }).error(function (data, status, headers, config) {
  });
});

</script>

</head>

<body ng-app="exampleApp">
<div ng-controller="eventCtrl">
    <div class="row">
        <div class="col-md-12" id="event-list">
            <ul>
                <li ng-repeat="p in wiggleEvents" >

                    <!-- i need to display a mixture of information from the first JSON file and information from each individual events JSON file -->
                    <img src="" ng-src="{{p.Image}}?w=125&h=125&a=7" />
                    <span class='name'>Title: {{p.Title}}</span>
                    <span>PID: {{p.pid}}</span>

                    <!--Each of these events has an Apirl which is a JSON file of the information on the event -->
                    <span>ApiUrl: {{p.ApiUrl}}</span>

                    <!--AND here i want to add short description of each event. found in the API of each individual event -->
                    <!--AND here i want to add difficulty rating from API of each individual event -->
                    <!--AND here i want to add location area of each individual event  etc etc etc -->
                </li>
            </ul>
        </div>                             
    </div>
</div>    
  </body>
</html>

我可以从主JSON文件中成功获取信息，并在页面中显示24个事件。

主要的JSON文件在这里： http://ajax.wiggle.co.uk/api/list/events/?ris=1

JSON中的每个“产品”都有自己的APIUrl，它自己的JSON文件包含有关该产品的更多信息。

我试图在我的html中输出来自主JSON的一些信息以及来自每个单独的JSON的一些信息。

我真的不知道如何访问每个单独的JSON文件，特别是因为第一个主文件中可能包含不同数量的“产品”。今天恰好是24岁，但明天可能是36岁等。

感谢

Answer 1

让我们说你有以下json对象：

myJsonObj= {
   user: {
       firstname : "jane",  
       lastname : "doe"
   },
   friend: {
       firstname: "hancock",
       lastname : "john"
   }
}

要使用ng-repeat迭代属性对象litteral（你的json对象），你必须使用（key，value），如：

<div ng-repeat="(key,value) in myJsonObj">  
    <span ng-bind="key"></span>    // displays "user" , then "friend"
    <span ng-bind="value.firstname"></span>     // displays "jane"  
    <span ng-bind="value.lastname"></span>     // displays doe  
</div>

在此处阅读有关迭代对象属性的更多信息：ng-repeat。

编辑：你也可以通过将一些数据传递给范围函数来做更多的事情。像

<div ng-repeat="(key,value) in myJsonObj">  
    // assuming retrieveUrl() is a scope function you wrote
    // in order to extract and return the url from the data you passed
    // as parameter
    <span ng-bind="retrieveUrl(value.url)"></span>    
</div>

Answer 2

从嵌入在ng-repeat中的数据中的url获取json数据的最佳方法是编写运行$ http GET的指令。像这样：

http://plnkr.co/edit/xFCG1p8WwDw9bt6jO49q?p=preview

HTML

<div ng-repeat="thing in things track by $index">
  <get-url-data url="thing"></get-url-data>
</div>

JS：

app.directive('getUrlData', function() {
  return {
    restrict: 'E',
    template: '<div>{{vm.jsonData}}</div>',
    scope: {
      url: '=?'
    },
    controllerAs: 'vm',
    bindToController: true,
    controller: function($http) {
      vm = this;
      $http.get(vm.url).then(function(response) {
        vm.jsonData = response;
      });
    }
  };
});

Answer 3

我设法找到了这个问题的答案。我在这个stackoverflow帖子中跟随选择的答案：

How to bind multiple JSON files in ng-repeat (AngularJS)?

这是以我理解的方式编写的，当我遵循它时，它对我有用。

AngularJS访问ng-repeat中的JSON文件

3 个答案: