使用restangular在angularJs上基於URL參數檢索記錄

Question

我對angularJ很陌生。

我正在嘗試根據url參數檢索對象。

例如，我有以下代碼：

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"
        })

而我的控制器為：

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


});

如果我的json文件為：我如何能夠基於字段“ url”檢索記錄：

{
    "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
                }
            ]
        }
    ]
}

我能夠檢索整個文件並重復數據，但是我想根據url字段過濾記錄並在我的視圖中使用它。 任何幫助，將不勝感激。 謝謝

Answer 1

您正在尋找的是服務$ routeParams 。 從文件或AJAX請求中獲取數據后，就可以使用$ routeParams.id在路由中獲取：id。

這是一個非常簡單的示例（來自小提琴）

<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);
});