Angular JS dynamically set tabindex attribute

Question

I'm fairly new to Angular, and I'm working on a simple flashcard website. Here's my current relevant HTML:

<div id="flashcards" class="row">
    <div class="flashcard col-sm-6 col-md-4 col-lg-3"
         ng-repeat="card in cards">
        <div class="flashcard-inside"
             ng-class="{'flipped' : card.flipped}">
            <div class="flashcard-btns">
                <button ng-click="flip(card)" class="btn btn-secondary">
                   <i class="fas fa-sync-alt"></i>
                </button>
                <button ng-click="remove(card)" class="btn btn-danger">
                  <i class="fas fa-trash"></i>
                </button>
            </div>
            <div class="flashcard-front">
                <textarea ng-model="card.front" 
                          class="form-control 
                          flashcard-content"
                          ng-tabindex="{-1 : card.flipped}">
                </textarea>
            </div>
            <div class="flashcard-back">
                <textarea ng-model="card.back"
                          class="form-control flashcard-content"
                          tabindex="card.flipped ? 0 : -1">
                </textarea>
            </div>
        </div>
    </div>
</div>

I'm making a flashcard for each card in cards.

My remove and flip functions are fairly simple:

$scope.flip = (card) =>
    card.flipped = !card.flipped;

$scope.remove = (card)=> 
    $scope.cards = $scope.cards.filter(obj=> obj.front!=card.front || obj.back!=card.back);

As you can see above, I've tried ng-tabindex="{-1 : card.flipped}" and I've tried tabindex="card.flipped ? 0 : -1" and several other combinations with no luck. I was hoping someone more experienced in Angular could point me in the right direction. It seems my problems would be solved if I could get a hold of the DOM element from the card variable in my flip scrips, and set its tabindex attribute with jQuery, however I can't seem to access the element for the textarea (which would be nice because I'd also like to focus it later).

Yes it does! Thank you. I'm going to answer my own question in a second in case it helps others. — Justin
– Justin, Commented Mar 12, 2020 at 18:56
Now a separate question: can I somehow focus the textarea when I flip the card? Pseudocode: $scope.flip = (card) => { card.flipped = !card.flipped; if(card.flipped) card.back.element.focus(); else card.front.element.focus(); } — Justin
– Justin, Commented Mar 12, 2020 at 19:00

georgeawg · Accepted Answer · 2020-03-12 19:44:31Z

3

There is no need to use ng-attr-tabindex, it can simply be done with interpolation:

<div class="flashcard-front">
    <textarea ng-model="card.front" class="form-control flashcard-content"
              tabindex="{{card.flipped ? -1 : 0}}"></textarea>
</div>
<div class="flashcard-back">
    <textarea ng-model="card.back" class="form-control flashcard-content"
              tabindex="{{!card.flipped ? -1 : 0}}"></textarea>
</div>

The problem with the code in the question is that the interpolation needs double curly brackets ({{ }}).

The ng-attr-* syntax is only necessary in exotic situations.

For more information, see

edited Mar 12, 2020 at 19:44

answered Mar 12, 2020 at 19:18

georgeawg

49k13 gold badges78 silver badges98 bronze badges

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

1 Comment

Justin Over a year ago

This works as well. I removed ng-attr- from the code on my machine. Thank you for your answer. Upvoted and accepted.

georgeawg · Accepted Answer · 2020-03-12 19:11:21Z

1

Credit to @Phix for the suggestion to use ng-attr.

The relevant part is ng-attr-tabindex="{{card.flipped ? -1 : 0}}" and the same but with !card.flipped instead of card.flipped.

My full code is:

<div class="flashcard-front">
    <textarea ng-model="card.front" class="form-control flashcard-content"
              ng-attr-tabindex="{{card.flipped ? -1 : 0}}"></textarea>
</div>
<div class="flashcard-back">
    <textarea ng-model="card.back" class="form-control flashcard-content"
              ng-attr-tabindex="{{!card.flipped ? -1 : 0}}"></textarea>
</div>

Angular Docs

edited Mar 12, 2020 at 19:11

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered Mar 12, 2020 at 18:58

Justin

1,16318 silver badges35 bronze badges

Collectives™ on Stack Overflow

Angular JS dynamically set tabindex attribute

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related