Question

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

所有新闻都在一个阵列中，该阵列位于新闻控制器中：

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

我不知道如何让一个单一的，选定的新闻可见......

Answer 1

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>

如何在angularjs中显示数组中的一个项目？

1 个答案: