Как перенаправить значение API из ng-repeat?

Question

У меня есть API, который возвращает список значений, я хочу иметь возможность щелкнуть имя драйвера в API для маршрутизации к сведениям о драйвере, но я не могу понять, как это сделать.

Вот так это выглядит сейчас

Альтернативный вид

Вот так это должно выглядеть, когда я нажимаю на имя из ng-repeat из api

Я новичок в угловых и очень запутанный атм.

это мой контроллер.

import { app } from '../index';

app.controller("api", function ($scope, $http) {
$scope.Naziv = "Driver Championship Standings - 2013";
$scope.NazivH1 = "Driver Championship";
$scope.TopDrivers = function () {
    console.log("i been pressed");
    $http.get("https://ergast.com/api/f1/2013/driverStandings.json")
        .then(function successCallback(response) {
            $scope.drivers = response.data.MRData.StandingsTable.StandingsLists[0].DriverStandings;
            console.log("response.data.MRData.StandingsTable.StandingsLists.0.DriverStandings");
            console.log(response.data.MRData.StandingsTable.StandingsLists[0].DriverStandings);
        }, function errorCallback(response) {
            console.log("Unable to perform get request");
        });
}

мои маршруты:

app.config(function($routeProvider, $locationProvider) {
    $locationProvider.hashPrefix("!");
    $routeProvider
        .when("/drivers", {
            templateUrl: "./src/pageDetails/drivers.html",
        })
        .when("/teams", {
            templateUrl: "./src/pageDetails/teams.html",
        })
        .when("/races", {
            templateUrl: "./src/pageDetails/races.html",
        })
        .otherwise({
            redirect: "./src/pageDetails/default.html",
        });
});

так выглядит мой шаблон.

<div ng-controller="api" ng-init="TopDrivers()">
    <h1>{{NazivH1}}</h1>
    <div id="modifyDiv">{{Naziv}}</div>
    <!-- <button ng-click="TopDrivers()">Test Rest</button> -->
    <div ng-repeat="x in drivers | orderBy: '+Points'">
        <div id="divRow">
            <table>
                <tr id="tableRow"><td id="td1">Nb: {{x.position}}</td><td id="td2">{{x.Constructors[0].nationality}} {{x.Driver.givenName}} {{x.Driver.familyName}}</td><td id="td3">{{x.Constructors[0].name}}</td> <td id="td4">Points{{x.points}}</td> </tr>
            </table>
        </div>
    </div>
</div>

Answer 1

во-первых, почему у вас ng-repeat на div, а не на <tr>?Вы хотите отдельный div для каждого драйвера или отдельную строку?Я предлагаю вам использовать ng-repeat для <tr>, а также добавить директиву ng-click для вашего <tr>, чтобы каждый раз, когда кто-то нажимал на строку драйвера, на вашем контроллере выполнялась функция, и в этой функции вы могли перенаправлять информацию о драйвере, такую ​​какниже: -

<tr ng-repeat="x in drivers | orderBy: '+Points'" ng-click="driverDetails(x.DriverId)" id="tableRow">
    <td id="td1">Nb: {{x.position}}</td>
    <td id="td2">{{x.Constructors[0].nationality}} {{x.Driver.givenName}} {{x.Driver.familyName}}</td> 
    <td id="td3">{{x.Constructors[0].name}}</td>
    <td id="td4">Points{{x.points}}</td>
</tr>

теперь в вашем контроллере напишите функцию driverDetails, как показано ниже: -

$scope.driverDetails = function (driverId) {

    $location.path('/driverDetails').search({ driverId: driverId });
};

, в этой функции вы изменяете URL и добавляете driverId в качестве строки запроса,Теперь в routes добавьте еще route

.when("/driverDetails", {
    templateUrl: "./src/pageDetails/driverdetails.html",
})

, поэтому, когда в контроллере выполняется функция driverDetails, загружается driverdetails.html и в идентификаторе запроса указывается идентификатор DriverId.Теперь в контроллере driverdetails просто извлеките driverId и выполните вызов API для этого конкретного драйвера

Answer 2

Вам необходимо добавить маршрут с подробным описанием водителя с необязательным параметром (что-то вроде /driver-detail/:id в определении маршрута).Передайте свой собственный контроллер, способ получения подробных данных (вы можете сохранить их в службе), а затем добавьте обработчик событий ng-click для случая, когда пользователь находится в списке драйверов, ng-repeat, и вы передаете идентификатор драйвера.там.

Что-то вроде:

<tr id="tableRow" ng-click="goToDetail(x.id)">...</tr>

А в контроллере:

$scope.goToDetail() = function(id) {
    $location.path('/driver-detail/' + id)
}

Ваше определение маршрута может выглядеть примерно так:

.when('/driver-detail/:id', {
    templateUrl: '...',
    controller: function($scope, $stateParams) {
      $scope.id = $stateParams.id;
      ...
    }
  }

Но я настоятельно рекомендую вам обновить свой стек, даже для AngularJS это старый способ кодирования - они представили компонент API, и, в частности, для маршрутизации ui-router - гораздо более мощная альтернативав нг роутер.Если вы начинаете проект, начните с Angular CLI (в настоящее время Angular 7), и вы получите гораздо больше отзывов и найдете больше онлайн-ресурсов, которые помогут вам.