角模板頁面

我想要在AngularJs中使用/ example/car/id模板站點，其中不同的ID是不同的汽車頁面。在app.js我寫道：角模板頁面

angular 
    .module('carApp', [ 
    'ngCookies', 
    'ngResource', 
    'ngRoute', 
    ]) 
    .config(function ($routeProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: 'views/main.html', 
     controller: 'MainCtrl' 
     }) 
     .when('/car/:id', { 
     templateUrl: 'views/car.html', 
     controller: 'CarCtrl' 
     }) 
    });

以JSON我做了2輛：

[{ 
"model": "Audi", 
"year": "1999" 
} 
{ 
"model": "BMW", 
"year": "2005" 
}]

在car.js我需要寫有

angular.module('carApp') 
.controller('CarCtrl', ['$scope','$http', function($scope, $http) 
{  
    $http.get('scripts/controllers/cars.json').success (function(data){ 
    $scope.cars = data; 
}); 

}] 
);

在哪裏和什麼碼example/car/1將顯示奧迪和example/car/2的詳細信息的模板將顯示有關BMW的詳細信息？

來源

2014-11-05 mateusz-c

您應該包括在JSON的ID爲每一輛汽車，如果你想在url中使用id。否則，我會建議使用模型。要去頁面jsut使用鏈接 krs8785 2014-11-05 15:57:20

，然後在html中，我怎麼能得到它？汽車[{{id}}]。name和angular會知道如果它的example/car/1的id是1並且從第一個對象讀取細節？或者我需要做一些更多的魔法？ – 2014-11-05 16:29:34

可以使用$routeParams閱讀帕拉姆，並把它們作爲查詢字符串添加到URL或使用該版本的$ HTTP：

$http({ 
    url: user.details_path, 
    method: "GET", 
    params: {user_id: user.id} 
});

https://stackoverflow.com/a/13760360/20126

來源

2014-11-05 15:49:38

假設你有某種表或列表中顯示該車爲用戶選擇，你可以有類似

<div ng-controller="carCtrl"> 
    <ul ng-repeat = "car in cars"> 
     <li> <a href ="#/cars/{{car.model}}> {{car.model}} </a></li> 
    </ul>   
</div>

因此，這將創建汽車用戶可以塞萊列表克拉。點擊鏈接後，它將轉到該模型的頁面。（請注意，我不使用ID這裏，因爲你沒有ID在你JSON）

來源

2014-11-05 16:38:57 krs8785

好吧，謝謝，這幫了我很大的忙。最後一個問題我怎麼能在html：/ car/1上寫下關於1號車的信息，那麼在那個頁面上會顯示它的車型和年份？{{cars.model}} {{cars [id] .model}}或者什麼，因爲它兩個不行 – 2014-11-05 16:45:56

我已經改變了CarCrl看起來像這樣：

angular.module('motoApp') 
.controller('CarCtrl', ['$scope','$http', '$routeParams', function($scope, $http, 
     $routeParams) {  
    $http.get('scripts/controllers/cars.json').success (function(data){ 
     $scope.car = data[$routeParams.id]; 
    }); 

}] 
);

，改變了JSON到詞典：

{ 
"1": { 
    "model": "Audi", 
    "year": "2012", 

"2": { 
    "model": "BMW", 
    "year": "2012", 
} 
}

這就是我想要的。現在，在HTML我有：

<p>{{ car.model }}</p> 
<p>{{ car.year }}</p>

，當我訪問/汽車/ 1就顯示了有關奧迪細節和/汽車/ 2有寶馬

來源

2014-11-06 13:57:59

回答

相關問題