이 코드가

Question

NG를 반복 :

<main class="gallery"> 
 
    <nav class="gallery-list-thumbs"> 
 
     <ul> 
 
      <li ng-click="showLarge($event); modalShow()" ng-repeat="photo in photos | filter:{'section': section }"> 
 
       <img data-ref="ref-{{ photo.id }}" data-orientation="{{ photo.orientation }}" class="photo-small" ng-src="photos/{{ photo.section }}/th/{{ photo.src }}"> 
 
      </li> 
 
     </ul> 
 
    </nav> 
 
    <section class="gallery-item" ng-hide="modalHidden"> 
 
      <h1 ng-model="section">{{ section }}</h1> 
 
      <div class="photo-container"> 
 
       <div class="modal-close" ng-click="modalShow()"></div> 
 
       <div class="modal-prev"></div> 
 
       <div class="modal-next"></div> 
 
       <img data-photoref="ref-{{ photo.id }}" ng-repeat="photo in photos | filter:{'section': section }" class="photo-large below orientation-{{ photo.orientation }}" ng-class="{'above':$first}" ng-src="photos/{{ section }}/{{ photo.src }}"> 
 
      </div> 
 
    </section> 
 
</main>

내가 무엇을 얻으려고하는지

의 modal-prev을 숨기는 것입니다을 때의 사용자 클릭 먼저 li을 gallery-list-thumbs으로하고 modal-next을 마지막으로 li과 동일한 것.

지금까지 $ index를 사용하여 범위를 변경하여 대상을 지정할 수 있었지만 매우 쉽습니다.하지만 갤러리 당 이미지의 양이 다른 경우 마지막 요소를 얻으려면 어떻게해야합니까? $first과 $last을 사용할 수 있기 때문에 다음 및 이전 화살표가 ng-repeat 안에 있으면 쉽게 될 것입니다. 그러나 그들을 포함시키고 싶지는 않습니다.

Answer 1

좋아, 나는 그것을 찾을 수있었습니다. 자기.

$first 및 last 범위를 변경 한 다음 범위 값에 따라 ng-show 및 ng-hide을 추가하는 것이 솔루션입니다.

<main class="gallery"> 
 
    <nav class="gallery-list-thumbs"> 
 
     <ul> 
 
      <li ng-click="showLarge($event); modalShow();setPosition('inbetween'); $first && setPosition('first') ; $last && setPosition('last')" ng-repeat="photo in photos | filter:{'section': section }"> 
 
       <img data-ref="ref-{{ photo.id }}" data-orientation="{{ photo.orientation }}" class="photo-small" ng-src="photos/{{ photo.section }}/th/{{ photo.src }}"> 
 
      </li> 
 
     </ul> 
 
    </nav> 
 
    <section class="gallery-item" ng-hide="modalHidden"> 
 
      <h1 ng-model="section">{{ section }}</h1> 
 
      <div class="photo-container"> 
 
       <div class="modal-close" ng-click="modalShow()"></div> 
 
       <div class="modal-prev" ng-hide="currentOrder == 'first';">{{ currentOrder }}</div> 
 
       <div class="modal-next" ng-hide="currentOrder == 'last';">{{ currentOrder }}</div> 
 
       <img data-photoref="ref-{{ photo.id }}" ng-repeat="photo in photos | filter:{'section': section }" class="photo-large below orientation-{{ photo.orientation }}" ng-class="{'above':$first}" ng-src="photos/{{ section }}/{{ photo.src }}"> 
 
      </div> 
 
    </section> 
 
</main>