Question

我有这段代码：

＆＃13;

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

＆＃13;

我希望实现的目的是在用户点击modal-prev中的第一个li时隐藏gallery-list-thumbs，并在最后一个modal-next上隐藏li {1}}。

到目前为止，使用$ index，它相当容易，因为我可以通过范围更改来定位它，但是如果每个图库有不同数量的图像，我如何获得最后一个元素？如果下一个和上一个箭头在ng-repeat内部会更容易，因为我可以使用$first和$last，但我不想将它们包括在内。

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>

使用Angular $ first和$ last在ng-repeat之外

1 个答案: