CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
unsafe_where_true
unsafe_where_true

Reputation: 6320

angular, setting dynamic tabindex with a custom directive

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.

Upvotes: 10

Views: 17445

Answers (1)

Jeremy Moritz
Jeremy Moritz

Reputation: 14932

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.

Upvotes: 14

Related Questions