Adding a tab index to an AngularJS accordion?

es3735746 picture es3735746 · Jun 30, 2014 · Viewed 12.2k times · Source

Hi I have an AngularJS accordion that I've created with the code below. I would like to add a tab index to the accordion such that someone can tab through all the li tags of the accordion.

            <accordion close-others="showOnlyOne">
                <accordion-group heading="{{group.name}}" ng-repeat="group in reportFiltered"  is-open="group.isThisOpen">
                    <ul class="nav">
                        <li ng-repeat="myObj in group.myObj">
                            <a ng-click="function(myObj.query)">{{myObj.name}}</a>
                        </li>
                    </ul>
                </accordion-group>
            </accordion>

I have tried doing things such:

tabIndex="item.index

but that doesn't seem to work.

Furthermore, I also need a way to access the tabs contents/value once they are currently tabbed on...but thats my next issue.

UPDATE:

I got the tabbing to work with {{$index}} but now I need to do something with the current li tag that is being tabbed over..

Answer

Thomas Roch picture Thomas Roch · Jun 30, 2014

Try

tabindex="{{item.index}}"

Or even better

ng-attr-tabindex="{{item.index}}"

You also can access $index from ngRepeat