因此我正在为一个简单的应用程序编写前端,并且我坚持一件事。 有一个新闻列表页面,应该将用户带到单个新闻页面。
所有新闻都在一个阵列中,该阵列位于新闻控制器中:
'use strict';
NaturaApp.controller('NewsCtrl', function($scope, $routeParams) {
$scope.$on('$routeUpdate', function(value) {
});
$scope.categories = [{
tout: "tout",
produits: "produits"}];
var categories = {
tout: "tout",
produits: "produits"
};
$scope.newsOne = [{
id: '1',
categoryID: categories.tout,
name: 'One Lorem ipsum.',
thumb: 'http://lorempixel.com/90/90/nature',
shot: 'Lorem ipsum dolor sit amet.',
cont: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi necessitatibus natus ullam.'},
{
id: '2',
categoryID: categories.tout,
name: 'Two Lorem ipsum.',
thumb: 'http://lorempixel.com/90/90/animals',
shot: 'Lorem ipsum dolor sit amet.',
cont: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit labore.'},
{
id: '3',
categoryID: categories.tout,
name: 'Three Lorem ipsum.',
thumb: 'http://lorempixel.com/90/90/abstract',
shot: 'Lorem ipsum dolor sit amet.',
cont: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id aliquid quidem obcaecati numquam nobis nam!'}];
$scope.newsTwo = [{
id: '1',
categoryID: categories.produits,
name: 'One CAT2 Lorem ipsum.',
thumb: 'http://lorempixel.com/90/90/sports',
shot: 'Lorem ipsum dolor sit amet.',
cont: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi necessitatibus natus ullam.'},
{
id: '2',
categoryID: categories.produits,
name: 'Two CAT2 Lorem ipsum.',
thumb: 'http://lorempixel.com/90/90/cats',
shot: 'Lorem ipsum dolor sit amet.',
cont: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit labore.'},
{
id: '3',
categoryID: categories.produits,
name: 'Three CAT2 Lorem ipsum.',
thumb: 'http://lorempixel.com/90/90/food',
shot: 'Lorem ipsum dolor sit amet.',
cont: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id aliquid quidem obcaecati numquam nobis nam!'}];
});
这是新闻列表页面,工作正常:
<ul class="list">
<li ng-repeat="newsOne in newsOne">
<a href="#/news/{{newsOne.id}}" data-transition="slide-in">
<span>
<img src="{{newsOne.thumb}}"/>
</span>
<span>
<b>{{newsOne.name}}</b><br>
{{newsOne.shot}}
</span>
<span class="chevron"></span>
</a>
</li>
</ul>
我不知道如何让一个单一的,选定的新闻可见......
答案 0 :(得分:2)
Woring plnkr here
在 route-config 中:
NaturaApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/news/', {
templateUrl: 'news.html',
controller: 'NewsCtrl',
})
.when('/news/:id', {
templateUrl: 'news-post.html',
controller: 'NewsCtrl',
});
}]);
<强> SchoolCtrl:强>
NaturaApp.controller('NewsCtrl', ['$scope', '$routeParams', function($scope, $routeParams) {
var listOfNews = [....];
if($routeParams.id)
{
$scope.news = listOfNews[$routeParams.id];
}
else
{
$scope.news = listOfNews;
}
}]);
在你的意见中: 的 news.html 强>:
<div ng-repeat="newspost in news">
<h1>{{newspost.title}}</h1>
</div>
新闻-post.html:强>
<h1>{{newspost.title}}</h1>
<p>{{newspost.content}}</p>