Question

我有一个返回值列表的api，我希望能够在api中单击驱动程序的名称以路由到驱动程序详细信息，但是我不知道该怎么做。

这是现在的样子

替代外观

这是当我单击api中的ng-repeat中的名称时的外观

我刚开始接触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>

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已加载，并且您在查询srting中具有driverId。现在，在driverdetails控制器中，只需检索driverId并为该特定驱动程序调用您的api

Answer 2

您需要添加带有可选参数的驾驶员详细信息路线（路线定义中的诸如/driver-detail/:id之类）。传递它自己的控制器，这是一种获取详细数据的方法（您可能希望将其保留在服务中），然后为用户在驱动程序列表ng-repeat中的时间添加ng-click事件处理程序，并传递驱动程序ID在那里。

类似的东西：

<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）开始，您将收集到更多反馈并找到更多在线资源来指导您。

如何从ng-repeat路由到api值？

2 个答案: