将 button/links 与我在 Angularjs 中的轮播图片绑定

Question

在我的应用程序中有一个旋转木马，其中包含我从服务中获得的图像。在旋转木马下方有 3 个按钮，可提供有关图像的更多信息。

这些信息按钮应该取代标准轮播的项目符号指示器。当显示相应的图像时，按钮会激活 class，因此它从其他 2.

中脱颖而出

下面是我的代码，我正在使用这个carousel

        <ul rn-carousel>
            <li ng-repeat="promo in promos">
               <img ng-src="{{ promo.slider[0].slide }}" alt="{{ promo.name }}">
            </li>
        </ul>

        <div ng-repeat="promo in promos">
            <button>
               <h2>{{ promo.name }}</h2>
               <p>- {{ promo.descr }} <span>{{ promo.disc }}</span></p>
            </button>
        </div>

我从我的服务中获取信息没有问题，只是链接部分给我带来了问题。

Answer 1

我在搜索我正在使用的轮播的问题页面后找到了解决方案。

    <ul rn-carousel rn-carousel-index="currentSlide">
        <li ng-repeat="promo in promos">
           <img ng-src="{{ promo.slider[0].slide }}" alt="{{ promo.name }}">
        </li>
    </ul>

    <div ng-repeat="promo in promos">
        <button ng-class="{activeBtn: $index==$parent.currentSlide}" ng-click="$parent.currentSlide = $index">
           <h2>{{ promo.name }}</h2>
           <p>- {{ promo.descr }} <span>{{ promo.disc }}</span></p>
        </button>
    </div>

我必须为我的 carousel-index 命名，对于我的指示器，我必须引用父元素才能使绑定起作用。

感谢Capricorn带路

将 button/links 与我在 Angularjs 中的轮播图片绑定

Bind button/links with my carousel images in Angularjs

carousel

angularjs