Блог

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

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

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

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

я новичок в angular и его очень запутанном atm.

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

 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>
  

во-первых, почему у вас есть ng-repeat вкл div , а не вкл <tr> ? Вам нужен отдельный div для каждого драйвера или вам нужна отдельная строка? Я предлагаю вам использовать ng-repeat on <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 загружается, и у вас есть идентификатор драйвера в запросе srting. Теперь в контроллере driverdetails просто извлеките DriverID и выполните вызов вашего api для этого конкретного драйвера

Вам нужно добавить маршрут сведений о драйвере с необязательным параметром (что-то вроде /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 является гораздо более мощной альтернативой ngRouter. Если вы начинаете проект, начните с Angular CLI (в настоящее время Angular 7), и вы получите гораздо больше отзывов и найдете больше онлайн-ресурсов, которые помогут вам.