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

Answer 1

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

• AngularJS Developer Guide - Interpolation
• AngularJS Developer Guide - ngAttr for binding to arbitrary attributes

Answer 2

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