angular, setting dynamic tabindex with a custom directive

Question

This is embarassing. I can't figure out how to do something appearingly trivial.

tr.row(ng-repeat="user in users")
  td
    div(input-inline-edit="user.name" tabindex="{{ $index*10 + 1 }}")
  td
    div(input-inline-edit="user.surname" tabindex="{{ $index*10 + 2 }}")
  td
    div(tabindex="{{ $index*10 + 3 }}")

As I have rows, I need to be able to traverse the tabindex by row. Thus I thought best is to have the first row 1,2,3,4 the next 11,12,13,14 then 21,22,23,24

etc.

I am so embarassed I haven't been able to do this, the above code does not work, I tried

{{$index *10 + 1}}

or {{getIndex($index, 1)}}") with in the controller:

$scope.getIndex = function(index,i) {
      return index*10 + i;
    }

and countless other combinations...I can't believe I haven't achieved to do something seemingly simple

EDIT: OK, turns out I was greedy with info. I have an own directive for inline editing, "input-inline-edit". I have edited the code accordingly above. So if I have that directive, the tabindex does NOT work, but if I have a normal div (the third in the above example) it DOES!!! So for the first two I get tabindex=null, for the third I get a valid number. I am baffled.

THis is strange. I use tabindex="{{ $index*10 + 1 }}"> and works fine... — Deividi Cavarzan
– Deividi Cavarzan, Commented Nov 14, 2013 at 22:36
is something like this? plnkr.co/edit/tgQuZER5kZK5UEqMIlUs?p=preview — Deividi Cavarzan
– Deividi Cavarzan, Commented Nov 15, 2013 at 2:40
why don't you just give them all the same tabindex? it will nicely go through all of them in order. — bokkie
– bokkie, Commented Dec 2, 2014 at 11:58
@faboolous I had the same story, I was trying, just like you, to come up with a genius algorithm...until I was told to give them the same tabindex, and guess what...:)) — bokkie
– bokkie, Commented Dec 3, 2014 at 12:37

Jeremy Moritz · Accepted Answer · 2015-11-04 20:15:28Z

14

THIS IS EASY. No need to overcomplicate it. Simply give each of the repeated elements the SAME tabindex. Users will still be able to tab through them just as before.

answered Nov 4, 2015 at 20:15

Jeremy Moritz

15.1k7 gold badges44 silver badges47 bronze badges

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

Collectives™ on Stack Overflow

angular, setting dynamic tabindex with a custom directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related