Угловая, подключайте объекты и отображайте правильную информацию

Question

Я создаю угловой webapp, перечисляя различные автомобили на боковой панели и некоторую информацию о конкретном автомобиле в информационном боксе.

Цель состоит в том, чтобы показать нужную информацию в поле при нажатии на различные автомобили.

У меня есть два разных массива (две конечные точки 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 машины на боковой панели. Но теперь я занимаюсь поиском в Интернете и пытаюсь подключить автомобили к информации с помощью циклов и функций в течение нескольких часов, но не знаю.

Да, я новичок в этом. Любая помощь была бы замечательной! Спасибо

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> 

Идентификатор будет ваш ключ им просто должно соответствовать правильному ключу в $ scope.information

Answer 2

Это зависит от того, какая информация содержит эти массивы. Если вы уверены, что каждый элемент соответствует другому, вы можете просто использовать $index в html.

<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" }, 
... 
] 

Тогда я предложил бы использовать циклы и построение нового массива с использованием идентификаторов.

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; 

Затем вы можете использовать $scope.carInfo в HTML-файл.

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