0

I am using a module called angular-slick-carousel, and have numerous items and I show the user what slide they are on and out of how many:

1 out of 10

user clicks on next arow

2 out of 10

The data is displayed in the carousel using Angular's ngRepeat directive and use $index to keep track of what slide the user is on, like so:

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

Issue is that the carousel title which contains the index and total of items from the array, changes when the user clicks on the next button, rather than being static, and only the content changing.

I thought by updating the model when the user clicks on the arrow(or whole title area) and binding it to an element outside of the carousel would work, like so:

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

Though this did not work.

Question

How do I bind data to an element outside of ngRepeat?

Patrick McDermott
  • 1,220
  • 1
  • 15
  • 30
  • 1
    With `ng-init="amberIndex=1"`, the prototype chain is not consulted, and a new integer property is added to the childScope. **This new property hides/shadows the parentScope property with the same name.** This issue with primitives can be easily avoided by following the "best practice" of always have a dot `'.'` in your model variables .i.e `ng-init="$ctrl.amberIndex=1"` – georgeawg Dec 18 '17 at 19:57
  • Thank you for that. I in fact do you use `vm` within my controllers but as I thought there was no need to interaction with the controller, I didn't think there was the need for binding the name with `$ctrl` – Patrick McDermott Dec 19 '17 at 09:12
  • Though I still have to say, I am stuck on how to increment the counter outside of the carousel a maximum of the array's length? – Patrick McDermott Dec 19 '17 at 09:35
  • In fact @georgeawg. is this really a duplicate? – Patrick McDermott Dec 19 '17 at 09:40
  • It answers the question of how to bind to data outside of `ng-repeat`. Maybe you need to ask another question. The more code there is to go through, the less likely people can find your problem. Streamline your example. See [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). – georgeawg Dec 19 '17 at 09:45
  • So maybe the question should of been, `how do I bind the $index counter outside of ng-repeat?` – Patrick McDermott Dec 19 '17 at 09:55

0 Answers0