将ng-repeat内的数据绑定在ng-repeat之外的元素中

时间:2017-12-18 17:15:42

标签: javascript angularjs slick.js

我正在使用一个名为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之外的元素?

0 个答案:

没有答案