Insertion de la clé JSON ID dans la directive ng-click, puis passez-la dans un autre contrôleur

Il existe 2 manières généralement acceptées (que je connais) de gérer cela. La première, la plus populaire et la plus recommandée est d'utiliser un service ou une usine. L'autre est d'utiliser le routeur et routeParams pour passer l'ID de la carte au contrôleur de détails.

Je n'ai aucune idée de la façon dont vous prévoyez d'afficher votre page de détails (utilisez le routeur pour naviguer vers une nouvelle page ou une directive pour simplement cacher / afficher certains éléments de DOM cachés), mais un service / usine peut être utilisé dans toutes les situations, Où la routeParams ne peut être utilisée qu'en une seule.

(Je vous recommande vivement de suivre le plus près possible le guide de style angulaire: https://github.com/johnpapa/angulaire-dyleguide/blob/master/a1/README.md si vous voulez vous épargner beaucoup Des maux de tête)

 angular.module('ngApp', []) .service('CarDetailService', CarDetailService) .controller('task', taskData) .controller('carDetails', carDetails); CarDetailService.$inject = ['$http', 'API']; function CarDetailService($http, API) { var CarDetailService = this; CarDetailService.setCar = function(carId) { CarDetailService.carId = carId; }; CarDetailService.getCar = function() { return $http.get(API + "/car/" + CarDetailService.carId); }; } taskData.$inject = ['$scope', '$http', 'API', 'CarDetailService']; function taskData($scope, $http, API, CarDetailService) { $http.get( API + '/tasks' ). success(function(data) { $scope.mainTask = data; console.log(data); }); $scope.selectCar = function(carId) { CarDetailService.setCar(carId); $location.url('/car-details-route'); //go to details page }; } carDetails.$inject = ['$scope', 'CarDetailService']; function carDetails($scope, CarDetailService) { CarDetailService.getCar().success(function(details) { $scope.details = details; }); } 

Et votre ng-repeat semblerait quelque chose comme ceci:

 <div ng-repeat="task in mainTask.tasks" ng-click="selectCar(task['Car ID'])"> {{task['Car ID']}} </div> 

Le service est un singleton, ce qui signifie que l'ID persistera à travers les changements de route et les existances du contrôleur.

Dans l'autre sens, il faut utiliser $ routeParams. Les documents sont disponibles ici: https://docs.angularjs.org/api/ngRoute/service/ $ routeParams

$ RouteParams vous permet d'ajouter votre identifiant dans le chemin qui est lu par le routeur et transmis au contrôleur:

 angular.module('ngApp', []).config(function($routeProvider) { $routeProvider.when('/car-details-route/:carId', { controller: 'carDetails', templateUrl: 'car-details.html' }); }) .controller('task', taskData) .controller('carDetails', carDetails); taskData.$inject = ['$scope', '$location']; function taskData($scope, $location) { $http.get( API + '/tasks' ). success(function(data) { $scope.mainTask = data; console.log(data); }); $scope.selectCar = function(carId) { $location.path('/car-details-route/'+carId); }; } carDetails.$inject = ['$scope', 'API', '$routeParams']; function carDetails($scope, API, $routeParams) { $http.get(API + "/cars/" + $routeParams.carId).success(function(details) { $scope.details = details; }); } 

 <div ng-repeat="task in mainTask.Tasks"> <div ng-click="carDetails.getCar( task['CAR ID'] )" > {{ task['CAR ID'] }} </div> </div> 

EDIT: explication: ma pensée est que PO ne savait pas comment utiliser correctement ng-click ni que vous pouvez envoyer de l'objet réel et ses propriétés, ou que sous la ng-repeat vous avez réellement dans votre portée l'objet répéteur

EDIT2: comment ajouter carID à la demande

 function carDetails($scope, $http, API) { $scope.getCar = function(carID){ $http.get( API + '/car/' + carID ). success(function(data) { $scope.details = data; console.log(data); }); } 

Si vous souhaitez maintenir l'état et accéder à une page de details , je vous recommande vivement d'utiliser ui-router . Sur quoi vous en apprendrez plus ici .

Pour recueillir des détails supplémentaires sur la façon dont vous feriez ce que vous voulez avec ui-router et en utilisant ui-sref consultez cette pile vraiment utile avec des upvotes incroyables.

https://github.com/angular-ui/ui-router

Recommander d'utiliser ui-router pour le routage

 $stateProvider .state('car.detail', { url: "/car/:carId", templateUrl: 'car.detail.html', controller: function ($stateParams) { // If we got here from a url of /car/42 //You can get car id on detail page by console.log($stateParams.carId) //output : 42 } }) 

Pour voir le bouton détaillé ou le lien, utilisez la suite

 <div ng-repeat="task in mainTask.Tasks"> <a ui-sref="car.detail({carId: task['CAR ID'] })> View Detail </a> </div> 

Lorsque vous cliquez sur 'Afficher les détails', il est redirigé sur la page de détail de la voiture sur le contourleur automobile. Vous pouvez obtenir l'identification de la voiture à partir de l'URL en utilisant

 var carId = $stateParams.carId 

Après avoir accepté, vous pouvez envoyer un appel API pour obtenir un détail de voiture

Sur le contrôleur de détail de la voiture, vous pouvez créer une fonction init comme:

  $scope.getCar = function(carID){ $http.get( API + '/car/' + carID ). success(function(data) { $scope.details = data; console.log(data); }); $scope.fnInit = function(){ var carId = $stateParams.carId; $scope.getCar(carId); } 

Veuillez consulter les commentaires du code pour comprendre

Code Angualr

 angular.module('ngApp', ['ui.router']) .factory('authInterceptor', authInterceptor) .constant('API', 'http://myserver.com/ecar/api') .controller('taskData', taskData) .controller('carDetails', carDetails) .controller('myCars', myCars) // ** EDIT ** ADDED MY UI-ROUTER CODE .config(function ($httpProvider, $stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/cars'); $stateProvider .state('cars', { url: '/cars', templateUrl: 'cars.html' }) .state('carDetails', { url: '/carDetails/:carId', //:carId use for pass id in URL templateUrl: 'mycar_details.html', controller: 'carDetails' }) .state('taskDetails', { url: '/taskDetails', templateUrl: 'task_details.html', controller: 'taskData' }) }); /* I think you use following controller for display task list in ng-repeat (ng-repeat="task in mainTask.Tasks")*/ function taskData($scope, $state) { /* fnGoToCarDetails function redirect on 'mycar_details.html' page * When you redirect on 'mycar_details.html' the URL is look like : "/#/carDetails/48" * in URL "12208" is a car id * You can get it in "carDetails" controller by $stateParams (see "carDetails" controller I have write code for it) * */ $scope.fnGoToCarDetails = function(id){ $state.go('carDetails', {carId: id}) //carDetails is state name which you have declared in routing } } function carDetails($scope, $http, $stateParams, API) { $scope.carID = $stateParams.carId; // ID get from URL parameters $scope.fnGetCarDetails = function(carId){ $http.get(API + '/car/carId').success(function (data) { $scope.details = data; console.log(data); // you get a car data here }); }; //call function for get a car detail when page load $scope.fnGetCarDetails($scope.carID); } 

Supposons que le code pour task_details.html ressemble à suivre

 <!--I think you use "taskData" controller for display task list in ng-repeat (ng-repeat="task in mainTask.Tasks")--> <div ng-controller="taskData"> <div ng-repeat="task in mainTask.Tasks"> <a ng-click="fnGoToCarDetails( task['CAR ID'])">View Details</a> <!--You can also use ui-sref to redirect on 'mycar_details.html' without any function(ng-click) [for it use following code]--> <!--<a ui-sref="carDetails({carId: task['CAR ID']})">View Details</a>--> </div> </div> 

Je pense que le code ci-dessus vous aide …