0

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

1 に答える 1

3

最も簡単な解決策:

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が追加され、プロジェクトを選択するためのプロジェクト名を表示するメニューが追加されたことに注意してください

于 2014-06-18T19:26:37.590 に答える