1

所以我为一个简单的应用程序编写前端，我坚持一件事。有一个新闻列表页面应该将用户带到单个新闻页面。

所有新闻都在一个数组中，它位于新闻控制器中：

'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>

老实说，我不知道如何使一个选定的新闻可见...

4

1 回答 1

2

在这里工作 plnkr

在您的路由配置中：

NaturaApp.config(['$routeProvider', function($routeProvider) {

    $routeProvider        
        .when('/news/', {
            templateUrl: 'news.html',
            controller: 'NewsCtrl',
        })      
        .when('/news/:id', {
            templateUrl: 'news-post.html',
            controller: 'NewsCtrl',
        });

}]);

学校控制：

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>
于 2013-04-01T22:44:27.320 回答