Question

我是Angularjs的新手。我正在学习工厂。在我的示例中，我有2个Restful Api请求，并以JSON格式获得2个响应。

使用第一个json，我可以使用ng-repeat来显示它们，但第二个json无法绑定到视图。

如何将两个响应绑定到同一个视图中？

这是我的代码

index.html文件

<!DOCTYPE html>
<html lang="en" ng-app='f1feed'>
  <head>

    <title>AngularJS Routing example</title>

    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
          padding-top: 10px;
          background-color: #F5F5F5;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.min.js"></script>
    <script src="js/app.js"></script>
  </head>

  <body ng-controller="DriverController">
        <table>
            <thead>
                <tr>
                    <th colspan="4">Drivers Champion Standings</th>
                </tr>
                <tr>
                    <th>No.</th>
                    <th>Full name</th>
                    <th>Driver ID</th>
                    <th>Points</th>
                </tr>
            </thead>
            <tbody  ng-repeat="driver in drivers">
                <tr>
                    <td>{{$index + 1}} </td>
                    <td>{{driver.Driver.givenName}} {{driver.Driver.familyName}}</td>
                    <td>{{driver.Driver.driverId}}</td>
                    <td>{{driver.points}}</td>
                </tr>
            </tbody>
        </table>
        <div class="info">
            <h1>1st Driver Detail info</h1>
            <ul>
                <li>Driver ID: {{alonso.driverId}} </li>
                <li>Date of Birth: {{alonso.dateOfBirth}} </li>
                <li>Nationality: {{alonso.nationality}}</li>
            </ul>
        </div>
  </body>
</html>

文件app.js

var app = angular.module('f1feed',[]);
app.factory('DriverSev', function($http){
    var driverApi = {};
    driverApi.getDriverStands = function(){
        return $http({
            method: 'JSONP',
            url: 'http://ergast.com/api/f1/current/driverStandings.json?callback=JSON_CALLBACK'
        });
    };
    driverApi.getDetail = function(){
        return $http({
            method: 'JSONP',
            url: 'http://ergast.com/api/f1/drivers/alonso.json?callback=JSON_CALLBACK'
        });
    };
    return driverApi;
});
app.controller('DriverController', function DriverController($scope, DriverSev){
    $scope.drivers = [];
    $scope.alonso = [];
    DriverSev.getDriverStands().success(function(data){
        $scope.drivers = data.MRData.StandingsTable.StandingsLists[0].DriverStandings;
    })
    DriverSev.getDetail().success(function(data){
        $scope.alonso = data.MRData.DriverTable.Drivers;
        console.log($scope.alonso);
    })
});

由于

Answer 1

您的$scope.alonso在您的视图中未使用，请将其放入另一个ng-repeat中以显示它

<table>
        <thead>
            <tr>
                <th colspan="4">Drivers Champion Standings</th>
            </tr>
            <tr>
                <th>No.</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody  ng-repeat="alon in alonso">
            <tr>
                <td>{{$index + 1}} </td>
                <td>{{alon}}</td>

            </tr>
        </tbody>
    </table>

如果它是相同的数据模型，请将其推送到$scope.drivers

Answer 2

$scope.alonso是一个数组。

        <ANY ng-repeat="details in alonso">
            <any>Driver ID: {{details.driverId}} </any>
            <any>Date of Birth: {{details.dateOfBirth}} </any>
            <any>Nationality: {{details.nationality}}</any>
        </ANY>

应该做的伎俩或丑陋的事情，例如{{alonso[0].driverId}}

无法在Angularjs中绑定JSON中的2个对象？

2 个答案: