Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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

share|improve this question
1  
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 Apr 1 '13 at 22:47
add comment

1 Answer

up vote 2 down vote

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>
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.