[AngularJS] Inserting JSON ID key into ng-click directive and then pass that into another controller in my app.js

[Kevin Ray]

This section of the app shows the minimal information of a user's task. 
When they click the "view details" button it will take them to a page that 
has more information about that specific CAR based on is ID.


Here is a pic to help explain the first part of what I am talking about:


<https://lh3.googleusercontent.com/-2A0BKDcnOxc/V5u4pg0hsRI/AAAAAAAAXTs/zMcpB9cSR5gLJwXIe6CA_8J9XwIaIjlvwCLcB/s1600/.jpg>


Here is my angular code:


angular.module('ngApp', []).factory('authInterceptor', 
authInterceptor).constant('API', 
'http://myserver.com/ecar/api').controller('task', 
taskData).controller('carDetails', carDetails).controller('myCars', myCars)
function taskData($scope, $http, API) {
  $http.get( API + '/tasks' ).
  success(function(data) {
    $scope.mainTask = data;
    console.log(data);
  });}
function carDetails($scope, $http, API) {
  $http.get( API + '/car/**THE CAR ID**' ).
  success(function(data) {
    $scope.details = data;
    console.log(data);
  });}


As you can see each CAR has its own unique ID (of course). I can display 
the ID by using:


ng-repeat="task in mainTask.Tasks"
{{ task['CAR ID'] }} // in the html


But I need this to do two things:

   1. When the user clicks the View button I need it to take them to 
   another page titled car_details.html. That page will make use of the 
   "carDetails" controller which will display all the info for the CAR.
   2. When a user clicks that same button I need somehow to take that 
   specific ID of that CAR ( {{ task['CAR ID'] }} ) being displayed in that 
   tile and then somehow pass it to the carDetails function in the spot that 
   says:
   
          $http.get( API + '/car/THE CAR ID' )


Where "THE CAR ID' needs to have the ID passed to it of the CAR who's "view 
details" button was just clicked. So that when the car_details.html page 
opens it will have all the correct content loaded for that car.


Someone on Stack Overflow told me to do this:


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


And for the controller:


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

But this doesn't seem to work. This way it doesn't even send a "get" 
request to the API.


I hope I have been clear enough. Let me know if I haven't and I will try to 
give you more info.


Thanks for the help!

-- 
You received this message because you are subscribed to the Google Groups 
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.