How to show one item from array in angularjs?

Question

So im writting front-end for one simple app, and im stuck on one thing. There is a news list page which should take user to single news page.

All news are in one array, which is sitting in the news controller:

'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!'}];
});

Here's news list page, working correctly:

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

And i dont have a clue to be honest how to make one single, selected news visible...

what you are trying to do is very similar to the tutorial on angular docs site. Go through the tutorial step by step... will help a lot docs.angularjs.org/tutorial — charlietfl
– charlietfl, Commented Apr 1, 2013 at 22:47

Kenneth Lynne · Accepted Answer · 2013-04-02 07:04:07Z

2

Woring plnkr here

In your 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;
    }        

}]);

And in your views: news.html:

<div ng-repeat="newspost in news">
   <h1>{{newspost.title}}</h1>
</div>

news-post.html:

<h1>{{newspost.title}}</h1>
<p>{{newspost.content}}</p>

edited Apr 2, 2013 at 7:04

answered Apr 1, 2013 at 22:44

Kenneth Lynne

15.6k12 gold badges66 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to show one item from array in angularjs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related