角度，連接對象和顯示正確的信息

Question

我正在創建一個角度的web應用程序，在側邊欄中列出不同的汽車，以及有關信息箱中特定汽車的一些信息。

其目的是在點擊不同的汽車時在框中顯示正確的信息。

我有兩個不同的數組（兩個API端點），其中第一個數組列出汽車的名稱，另一個獲得有關汽車的信息。但我不知道如何將對象與主鍵和外鍵連接起來，以及在點擊汽車後我應該如何輸出正確的信息。

app.js：

angular.module('myApp', []) 
.controller('MyController', function($scope, $http) { 

    function fetch() { 

     $http({method : 'GET',url : 'http://*cars*'}) 
      .success(function(data) { 
       $scope.cars = data; 
      }); 

     $http({method : 'GET',url : 'http://*information*'}) 
      .success(function(data) { 
       $scope.information = data; 
      }); 

    } 

    fetch(); 

}) 

HTML：

<div id="sidebar"> 

      <ul> 

       <li ng-repeat="name in cars"><a href="#">{{ name.displayName }}</a></li> 

      </ul> 

</div> 

對於現在我所做的是，我已經獲取的數據，並在側邊欄outputed汽車。但是現在我一直在使用Google，並試圖將汽車與循環和功能連接數小時，但仍然無能爲力。

是的，我是新手。任何形式的幫助都會很棒！謝謝

Answer 1

你可以用ng路由處理這個問題。你可以這樣做：

在你的路由定義：

.when(/cars/:Id), { 
      name: 'cars', 
      templateUrl : 'ayourtemplate.html', 
      controller : 'yourCtrl' 
     }) 

在你的HTML：

<div id="sidebar"> 
    <ul> 
     <li ng-repeat="name in cars"><a href="cars/1515">{{ name.displayName }}</a></li> 
    </ul> 
</div> 

的ID是你的關鍵土特產品將只需要匹配在右側鍵您$ scope.information

Answer 2

這取決於這些數組包含的信息。 如果您確定，那麼每個元素都與其他元素相對應，您可以在html中使用$index。

<li ng-repeat="name in cars"> 
    <a href="#">{{ name.displayName }}</a> 
    <p>{{ information[$index] }}</p> 
</li> 

但是，如果數組中的元素沒有排序，則必須檢查數組中的對象的主鍵。我們假設，數組中的數據如下所示：

cars: 
[ 
    { id: "1", name: "Carrera GT" }, 
    { id: "2", name: "DB 11" }, 
... and so on 
] 

information: 
[ 
    { id: "2", info: "Lorem ipsum" }, 
    { id: "1", info: "Dolor sit amet" }, 
... 
] 

然後我建議使用循環並使用ids構建新數組。

var carinfo = []; 
    cars.forEach(car => { 
     obj["id"] = car.id; 
     obj["name"] = car.name; 
     obj["info"] = ""; // Placeholder 

     info.forEach(c => { 
      if (c.id === car.id) { 
       obj["info"] = c.info; 
      } 
     }); 

     carinfo.push(obj); 
    }); 
    $scope.carInfo = carinfo; 

然後，您可以在html文件中使用$scope.carInfo。

<li ng-repeat="car in carInfo"> 
    <a href="#">{{ car.name }}</a> 
    <p>{{ car.info }}</p> 
</li>