How to route to an api value from ng-repeat? - angularjs

Question

I have an api that returns a list of values, i want to be able to click the name of the driver in the api to route to driver details but i cant figure out how to do that.
This is how it looks now
Alternative Look
This is how it should look when i click on the name from ng-repeat from api
i am new to angular and its very confusing atm.
this is my controller.
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");
});
}
my routes:
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",
});
});
this is the how my template looks.
<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

firstly why do you have ng-repeat on div and not on <tr>? Do you want a separate div for each driver or do you want a separate row? I suggest you use ng-repeat on <tr> and also add a ng-click directive on your <tr> so whenever someone clicks a driver row, function gets executed on your controller and in that function you can route to the driver details like below:-
<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>
now in your controller write the driverDetails function like below:-
$scope.driverDetails = function (driverId) {
$location.path('/driverDetails').search({ driverId: driverId });
};
in this function you are changing the url and appending the driverId as query string. Now in the routes add another route
.when("/driverDetails", {
templateUrl: "./src/pageDetails/driverdetails.html",
})
so when the driverDetails function is run in the controller, the driverdetails.html is loaded and you have the driverId in the query srting. Now in the driverdetails controller just retrieve the driverId and make call to your api for that specific driver

Answer 2

You need to add a driver details route with an optional parameter (something like /driver-detail/:id in the route definition). Pass it's own controller, a way to fetch the detail data (you might want to keep it in a service) and then add a ng-click event handler for when the user is in the drivers list ng-repeat and you pass the driver id in there.
Something like :
<tr id="tableRow" ng-click="goToDetail(x.id)">...</tr>
And in the controller :
$scope.goToDetail() = function(id) {
$location.path('/driver-detail/' + id)
}
Your route definition could look something like this :
.when('/driver-detail/:id', {
templateUrl: '...',
controller: function($scope, $stateParams) {
$scope.id = $stateParams.id;
...
}
}
But I strongly recommend you to upgrade your stack, even for AngularJS this is an old way to code - they introduced the component API and particularly for routing, the ui-router is a much more powerful alternative to the ngRouter. If you're starting a project, start with Angular CLI (currently Angular 7) and you'll collect a lot more feedback and find more online resources to guide you.