角模板页面

我想要在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

回答

相关问题