angularjs의 배열에서 한 항목을 표시하는 방법?

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

당신의 경로-설정에서 10

:

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>