我正在使用一个名为angular-slick-carousel
的模块,并且有很多项目,我会向用户显示他们所使用的幻灯片以及有多少:
1 out of 10
用户点击下一个
2 out of 10
数据使用Angular的ngRepeat
指令显示在轮播中,并使用$index
跟踪用户所在的幻灯片,如下所示:
<slick data="$ctrl.phaseArr" settings="slickConfig">
<div ng-repeat="item in $ctrl.phaseArr">
<table>
<tr>
<th>Amber Renewal {{$index + 1}} of {{$ctrl.amberRenewals.length}}
</tr>
</table>
</div>
</slick>
问题是,包含索引和数组中项目总数的轮播标题会在用户单击下一个按钮时更改,而不是静态,只有内容更改。
我想通过在用户点击箭头(或整个标题区域)时更新模型并将其绑定到旋转木马外部的元素就可以了,如下所示:
<div>
<p >Amber Renewal <span ng-bind="amberIndex"></span> of {{$ctrl.amberRenewals.length}}</p>
</div>
<slick data="$ctrl.phaseArr" settings="slickConfig">
<div ng-repeat="item in $ctrl.phaseArr">
<table>
<tr ng-init="amberIndex = 1" ng-click="amberIndex = 5">
<th>Amber Renewal {{$index + 1}} of {{$ctrl.amberRenewals.length}}
</tr>
</table>
</div>
</slick>
虽然这不起作用。
问题
如何将数据绑定到ngRepeat
之外的元素?