無法在Angularjs中綁定來自JSON的2個對象？

我是Angularjs的新手。我正在學習工廠。在我的示例中，我向Restful Api發出了2個請求，並以JSON格式獲得了2個響應。無法在Angularjs中綁定來自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); 
    }) 
});

感謝

來源

2014-07-17 Huy Do

你需要把它放（2 JSON）在同一個列表？ – ThomasP1988

你$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

來源

2014-07-17 09:44:36 ThomasP1988

$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}}

來源

2014-07-17 09:45:01 Pak

謝謝。有用。在這種情況下，我差點忘了使用另一個ng-repeat。 –

回答

相關問題