retrieving records based on url parameters on angularJs using restangular

Question

I am quite new to angularJs.

I am trying to retrieve an object based on the url parameter.

For example I have the following code:

var tripApp = angular.module('tripApp', ['ui.state', 'ui.bootstrap', 'restangular', 'tripApp.directives', 'restaurantServices'])
    tripApp.config(function($stateProvider, $urlRouterProvider, RestangularProvider){

      RestangularProvider.setBaseUrl('json');
      RestangularProvider.setRequestSuffix('.json');

      $urlRouterProvider.otherwise("/hotels")

      $stateProvider
        .state('hotels', {
            url: "/hotels/:id",
            templateUrl: "templates/hotels.html",
            controller: "HotelDetailController"
        })

And my controller as:

tripApp.controller('HotelDetailController', function($scope, $timeout, Restangular) {


});

How would I be able to retrieve a record based on the field 'url' if my json file was:

{
    "hotels":
    [
        {
            "url":"bandos-island-resort",
            "name": "Bandos Island",
            "city": "Male",
            "country": "Maldives",
            "img": "http://www.barcelo.com/BarceloHotels/en_GB/Images/oviedo-barcelo-hotels-views.jpg21-29254.jpg",
            "price": 199,
            "offer": 50,
            "standard": [1, 2, 3, 4],
            "roomsleft": 4,
            "facilities": [
                {
                    "wifi": true,
                    "breakfast": false,
                    "spa": false,
                    "beachAccess": false,
                    "pool": false,
                    "airportShuttle": false,
                    "restaurant": false,
                    "bar": false,
                    "coffeeShop": false,
                    "noSmoking": false,
                    "petFriendly": false,
                    "jacuzzi": false,
                    "laundry": true,
                    "miniBar": false,
                    "parking": false,
                    "roomService": false,
                    "sauna": false,
                    "scubaDiving": false,
                    "snorkeling": false,
                    "waterSkiing": false,
                    "windSurfing": false,
                    "tennis": false,
                    "golf": false,
                    "weddingPlan": false
                }
            ] 
        },
        {
            "url":"bandos-island-resort",
            "name": "Club Faru",
            "img": "http://www.barcelo.com/BarceloHotels/en_GB/Images/oviedo-barcelo-hotels-views.jpg21-29254.jpg",
            "price": 299,
            "offer": 0,
            "standard": [1, 2, 3],
            "roomsleft": 4,
            "facilities": [
                {
                    "wifi": true,
                    "breakfast": false,
                    "spa": false,
                    "beachAccess": false,
                    "pool": false,
                    "airportShuttle": false,
                    "restaurant": false,
                    "bar": false,
                    "coffeeShop": false,
                    "noSmoking": false,
                    "petFriendly": false,
                    "jacuzzi": false,
                    "laundry": false,
                    "miniBar": false,
                    "parking": false,
                    "roomService": false,
                    "sauna": false,
                    "scubaDiving": false,
                    "snorkeling": false,
                    "waterSkiing": false,
                    "windSurfing": false,
                    "tennis": false,
                    "golf": false,
                    "weddingPlan": false
                }
            ]
        }
    ]
}

I am able to retrieve the whole file and repeat the data, but I would like to filter a record based on the url field and use it in my view. Any help would be appreciated. Thanks

Answer 1

What you are looking for is the service $routeParams. Once you got your data from your file or AJAX request, you use $routeParams.id to get your :id in your route.

Here is a very simple example (from fiddle)

<div ng-app="myApp">
    <div ng-view></div>
    <script type="text/ng-template" id="/page.html">
    My ID is: {{id}}
    </script>
</div>

app.js

var app = angular.module('myApp', [])
.config(function($routeProvider) {
    $routeProvider
    .when('/page/:id', {templateUrl: '/page.html', controller: 'PageController'})
    .otherwise({redirectTo:'/page/50'});
}).controller('PageController', function($scope, $routeParams) {
    $scope.id = parseInt($routeParams.id);
});