Angular.js clique sur le jeu de données json?

J'ai un petit projet de portefeuille que j'essaie de construire avec Angular, j'ai reformulé les projets dans mon portefeuille en utilisant ng-repeat. Mais je veux juste 1 (le premier) projet à montrer. J'ai une petite navigation dans la barre latérale et je souhaite pouvoir cliquer sur les éléments des projets. Je suis totalement nouveau chez Angular, mais jusqu'à présent j'ai lu dans le routage et les modèles, mais je ne veux pas utiliser de fichiers html externes. Les suggestions sont très appréciées!

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> 

• AngularJS Decorator sans object.defineProperty
• Angularjs – Valider la valeur de l'URL initiale avec une directive personnalisée
• Comment mettre à jour angularjs $ scope à partir de $ .get jquery?
• Comment définir le premier contrôleur d'un autre contrôleur
• Comment faire que angularfire envoie ng-grid onBlur à la base de firebase automatiquement?

• Les JS angulaires attribuent la classe à l'étiquette du corps en fonction de la vue affichée?
• Comment transmettre une valeur de variable angularjs à une fonction javascript?
• Contenu AngularJS et Google
• Facebook partage le comportement de l'arratic avec AngularJS
• Filtre les objets correspondant aux détails

 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; }); 

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