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，并选择了项目名称以供选择项目的菜单