1

そのため、1 つの単純なアプリのフロントエンドを書いていて、1 つのことにこだわっています。ユーザーを単一のニュースページに移動させるニュースリストページがあります。

すべてのニュースは、ニュース コントローラーにある 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>

そして、正直に言うと、選択した 1 つのニュースを表示する方法がわかりません...

4

1 に答える 1

2

ここでplnkrを着用

あなたのroute-config で:

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 に答える