角をつけてオブジェクトを接続し、権利情報を表示

Question

サイドバーにさまざまな車をリストし、インフォメーションボックス内の特定の車に関する情報を表示します。

目的は、異なる車をクリックしたときにボックスに正しい情報を表示することです。

2つの異なる配列（2つのAPIエンドポイント）があります。最初の配列には車名が、もう1つには車に関する情報があります。しかし、私はどのように主キーと外部キーでオブジェクトを接続するのか分かりませんし、私は車をクリックした後に正しい情報を出力するはずです。

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たことです。しかし、今私はグーグルで、数時間にわたりループや機能を備えた情報に車を接続しようとしていますが、無駄な時間はありません。

はい、これは初めてです。あらゆる種類の助けが素晴らしいだろう！ありがとう

Answer 1

これはng-routeで処理できます。あなたのルート定義では

：あなたのような何かを行うことができます

.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はあなたの鍵のTOUになりますあなたの$ 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>