如何在angularjs中顯示數組中的一個項目？

所以我寫一個簡單的應用程序的前端，並堅持一件事。有一個應該把用戶帶到單個新聞頁面的新聞列表頁面。如何在angularjs中顯示數組中的一個項目？

所有資訊都在一個陣列，這是坐在新聞控制器：

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

，我不有一個線索，說實話如何使一個單一的，選定的新聞可見...

來源

2013-04-01 Dawid Gorczyca

你要做的事情與angular docs網站上的教程非常相似。逐步瀏覽教程...將幫助很多http://docs.angularjs.org/tutorial – charlietfl

Woring plnkr here

在你路由配置：

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>

來源

2013-04-01 22:44:27

如何在angularjs中顯示數組中的一個項目？

回答

相關問題