AngularJS - Get data by ID

Question

I got the following situation:
I got some custom marker as a static (not google) map. I am showing (and filtering) a marker with this code:

<div ng-controller="DealerDetailsListCtrl"> <a ng-click="showdetails=!showdetails" href="#/dealer/{{marker.id}}" class="marker" style="left:{{marker.left}};top:{{marker.top}}" ng-repeat="marker in dealer|zipFilter:zipCodeLookup:countryLookup"></a> </div> 

I direct it to "dealer-details.html" where I successfully display the ID:

  <div class="alldealermodal" ng-controller="DealerDetailsCtrl"> <div ng-view></div> </div> 

with this controller / routing:

 app.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/dealer/:id', {templateUrl: 'files/tpl/dealer-details.html', controller: DealerDetailsCtrl}). otherwise({redirectTo: '/'}); }]); 

and

 function DealerDetailsCtrl($scope, $routeParams) { $scope.id = $routeParams.id; } 

Since I am very new to angularJS, I would like to know how I can get all the data by ID.

My json file looks like this:

 [ { "id": "2", "name": "Laden Dortmund", "strasse": "Unionstr.", "hausnr": 1, "plz": "45525", "stadt": "Dortmund", "land": "DE", "url": "http://www.google.de", "tel": "0234-234568", "email": " [e-mail] ", "left": "200px", "top": "300px", "lowRange":60000, "highRange":70000 }, { "id": "1", "name": "Laden Unna", "strasse": "Berlinerstr.", "hausnr": 134, "plz": "78654", "stadt": "Unna", "land": "AT", "url": "http://www.bing.de", "tel": "0234-11223344", "email": " [e-mail] ", "left": "250px", "top": "500px", "lowRange":40000, "highRange":50000 } ] 

etc ... and I would like to get all the data from the selected identifier. How can i do this? Anyone give a hint?

I use this controller to get ALL data from json:

 function DealerListCtrl($scope, $http) { $scope.dealer = []; $http.get('files/js/dealer.json').success(function(data) { $scope.dealerall = data; }); $scope.orderProp = 'id'; } 

Answer 1

First of all, you do not need to set ng-controller="DealerDetailsCtrl" in dealer-details.html , because ng-view will take care of this.

Secondly, you must provide a service to retrieve your data:

 var app = angular.module('myApp', []); app.factory('dealerService', function($http) { return { getDealerList function() { var dealers = { list : [] }; // TODO add possible caching via $cacheFactory $http.get('files/js/dealer.json').success(function(data) { dealers.list = data; }); return dealers; }, // other functions }; }); 

In your controllers, where you need to access your dealers, simply enter the DealerService , as in the case of another service. To get a specific entry, just iterate.

Another possibility is to use the resolve property on $ routeProvider to send the dealer data to the DetailController.