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

Question

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

0

Я создаю угловой 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>

Пока что все, что я сделал, это то, что я извлек данные и вывел автомобили на боковой панели. Но теперь я занимаюсь поиском в Интернете и пытаюсь подключить автомобили к информации с помощью циклов и функций в течение нескольких часов, но не знаю.

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

Kazordomo 03 авг. 2016, в 14:27

Источник

0

Почему бы вам не использовать один массив для хранения автомобилей и их информации и просто отображать информацию о выбранном автомобиле?
Aron 03 авг. 2016, в 11:59

Теги:

javascript

angularjs

api

primary-key

2 ответа

Ещё вопросы

Почему бы вам не использовать один массив для хранения автомобилей и их информации и просто отображать информацию о выбранном автомобиле?

DMCISSOKHO · Answer 1 · 2016-08-03T10-24-00.000Z

Вы можете справиться с этим с помощью 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>

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

Cfanny · Answer 2 · 2016-08-03T10-16-00.000Z

Это зависит от того, какая информация содержит эти массивы. Если вы уверены, что каждый элемент соответствует другому, вы можете просто использовать $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" }, 
...
]

Тогда я бы предложил использовать циклы и построить новый массив с помощью 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;

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

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

Большое спасибо! $ index работает отлично и выводит правильные данные :) Я попробую второе решение для хорошей практики. Вещи, подобные тому, что я пытался сделать, но потерпел неудачу