AngularJS - Get data by ID
First of all, you don't need to set ng-controller="DealerDetailsCtrl"
in dealer-details.html
, because ng-view
will take care of that.
Secondly, you should 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, just inject DealerService
, as you would another service. To fetch a particular entry, just iterate.
Another possibility is use the resolve
property on $routeProvider to send the dealer data to the DetailController.
Marek123
Updated on August 04, 2022Comments
-
Marek123 over 1 year
I got the following situation:
I got some custom marker an a static (non google) map. I display(and filter) the 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 route it to the "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'm very new to angularJS I would like to know, how could I get all the data by the 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": "[email protected]", "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": "[email protected]", "left": "250px", "top": "500px", "lowRange":40000, "highRange":50000 } ]
and so on.... and I would like to get all data from the chosen id. How can I do that? Would somebody give ma a hint?
I use this controller to get ALL the data from the json:
function DealerListCtrl($scope, $http) { $scope.dealer = []; $http.get('files/js/dealer.json').success(function(data) { $scope.dealerall = data; }); $scope.orderProp = 'id'; }