I have a small portfolio project I'm trying to build with Angular, I have the projects in my portfolio repeated using ng-repeat. But I just want 1 (the first) project to show. I have a little navigation in the sidebar and I want to be able to click through the items in the projects. I'm totally new to Angular, but so far I'v read into routing and templates but I don't want to use external html files. Any suggestions are much appreciated!
Javascript:
var app = angular.module('myPortfolio', []);
var pageContent = [
{
displayOrder: 1,
name: 'Project 1',
description: "Some description",
images: ["img/portfolio/feat_image_1.jpg"]
},
{
displayOrder: 2,
name: 'Project 2',
description: "A second description",
images: ["img/portfolio/feat_image_2.jpg"]
},
{
displayOrder: 3,
name: 'Project 3',
description: "A third description",
images: ["img/portfolio/feat_image_3.jpg"]
}
];
app.controller("portfolioController", function($scope) {
this.projects = pageContent;
});
HTML:
<div ng-controller="portfolioController as myPortfolio">
<!-- various html page header etc. -->
<div class="row" ng-repeat="project in myPortfolio.projects">
<div class="large-2 columns" id="sidebar">
<h1>{{project.name}}</h1>
<p>{{project.description}}</p>
<div class="row side-nav-div">
<div class="large-4 columns project-nav">
<button type="button" class="slick-prev slick-disabled left">Previous</button>
</div>
<div class="large-4 columns project-nav centered">
</div>
<div class="large-4 columns project-nav">
<button type="button" class="slick-next slick-disabled right" ng-click="">Next</button>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="large-10 columns" id="main-section">
<div class="slider1">
<div class="feature-img" ng-repeat="image in project.images">
<img ng-src="{{image}}"/>
</div>
</div>
</div>
</div>
</div>