Adding a tab index to an AngularJS accordion?

Question

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

Thomas Roch · Accepted Answer · 2014-06-30 19:23:48Z

6

Try

tabindex="{{item.index}}"

Or even better

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

You also can access $index from ngRepeat

answered Jun 30, 2014 at 19:23

Thomas Roch

1,2168 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

es3735746 Over a year ago

Would i attach this to the li tags? I tried the first one earlier and it didnt let me tab through ` <li ng-repeat="myObj in group.myObj" ng-attr-tabindex="{{myObj.index}}"> <a ng-click="function(myObj.query)">{{myObj.name}}</a> </li>`

Thomas Roch Over a year ago

You add it to the element you want to add tabindex to. You don't seen to have "item.index" in your scope, this should work with a valid variable

es3735746 Over a year ago

I got {{$index}} to work instead. I'm confused why the other way didn't work though. Is there a way to select these tags by their tabindex?

Thomas Roch Over a year ago

I really don't understand what you are trying to do

es3735746 Over a year ago

Each of these li tags has a name. Let's say when the tab is on top of any of the li tags, I wanted to console.log or alert the {{myObj.name}} of the li tag that is currently tabbed on when the user hits the enter tab.

|

Collectives™ on Stack Overflow

Adding a tab index to an AngularJS accordion?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related