Angular.js單擊json數據數組？

Question

我正在嘗試使用Angular構建一個小型投資組合項目，我使用ng-repeat重複了我的投資組合中的項目。但我只想要1（第一個）項目展示。我在側欄中有一個小導航，我希望能夠點擊項目中的項目。我對Angular完全陌生，但到目前爲止，我已經閱讀了路由和模板，但我不想使用外部html文件。任何建議都非常感謝！

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

Answer 1

最簡單的辦法：

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; 

}); 

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

請注意在項目詳細信息列表中添加了activeProject變量ng-show，並選擇了項目名稱以供選擇項目的菜單