0

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>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
conor909
  • 1,475
  • 14
  • 29

1 Answers1

3

Easiest solution:

app.controller("portfolioController", function($scope) {
    $scope.projects = [
    {
        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"]
    }
    ];

    $scope.activeProject=0;

});

your HTML

<div ng-controller="portfolioController as myPortfolio">

<ul><li ng-repeat="project in myPortfolio.projects" ng-click="$parent.activeProject=$index">{{project.name}}</li></ul>
<!-- various html page header etc. --> 

  <div class="row" ng-repeat="project in myPortfolio.projects" ng-show="$index==$parent.activeProject">

      <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" ng-disabled="$index==0" ng-click="activeProject=$index-1">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-disabled="$index==(myPortfolio.projects.length-1)" ng-click="activeProject=$index+1">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>

note the addition of activeProject variable, ng-show in the projects details list and a menu fieht the project names to select the project

Dayan Moreno Leon
  • 5,357
  • 2
  • 22
  • 24
  • Thanks for the info! That works great for a menu, but I'm trying to think of a way to click through the data, loading the next item in the object on an ng-click – conor909 Jun 19 '14 at 19:31
  • click throught what data. where do you want. to click and show what please be a little more clear on what you are trying to achieve – Dayan Moreno Leon Jun 20 '14 at 01:54
  • Sorry if its not clear enough. I'd like to be able to click through the data objects in the projects array. By clicking in the project-nav element (next and previous buttons) – conor909 Jun 21 '14 at 14:15
  • please note the changes to the buttons i added ng-disable directives and ng-clicks to handle the menu navegation also changed from this to $scope in the controller, but thats just because i fell more comfortable working with the scopes – Dayan Moreno Leon Jun 21 '14 at 17:45
  • Sorry if this is a silly question, but for some reason $scope wont work for me, Angular docs say "Making sure each dependency is defined will fix the problem". But I thought scope was built into Angular? I'm getting the following error in my console: "Error: [$injector:unpr] Unknown provider: aProvider <- a" – conor909 Jun 21 '14 at 20:57
  • $scope is injected to controllers like any other dependencie and as such you need to declare it in your controllers dependecies .controller('mycontroller',function($scope){/*you can use scope here*/}) but this works only on unminified code if you where minifying your controller should look like ('mycontroller',["$scope",function($scope){/*you can use scope here*/}]) – Dayan Moreno Leon Jun 22 '14 at 17:31
  • Ah ok, yes I'm minifying. Appreciate all the feedback – conor909 Jun 22 '14 at 18:05
  • not a problem, note that this is also needed for your directives and services as well, so angular can inject the dependencies – Dayan Moreno Leon Jun 22 '14 at 18:47