Angular JS динамически установленный атрибут tabindex

Question

Я довольно новичок в Angular, и я работаю над простым веб-сайтом с карточками. Вот мой текущий актуальный 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>

Я делаю карточку для каждого card in cards.

Мои функции удаления и отражения довольно просты:

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

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

Как вы можете видеть выше, я пробовал ng-tabindex="{-1 : card.flipped}", пробовал tabindex="card.flipped ? 0 : -1" и несколько других комбинаций с не повезло. Я надеялся, что кто-то более опытный в Angular сможет направить меня в правильном направлении. Кажется, что мои проблемы были бы решены, если бы я мог получить элемент DOM из переменной card в моих флипчартах и ​​установить его атрибут tabindex с jQuery, однако я не могу получить доступ к элементу для textarea ( что было бы неплохо, потому что я бы тоже хотел сфокусироваться на этом позже).

Answer 1

Нет необходимости использовать ng-attr-tabindex, это можно просто сделать с интерполяцией:

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

Проблема с кодом в вопросе заключается в том, что для интерполяции нужны двойные фигурные скобки ({{ }} ).

Синтаксис ng-attr-* необходим только в ситуациях exoti c.

Для получения дополнительной информации см.

• AngularJS Руководство разработчика - интерполяция
• AngularJS Руководство разработчика - ngAttr для привязки к произвольным атрибутам

Answer 2

Благодарим @Phix за предложение использовать ng-attr.

Соответствующая часть - ng-attr-tabindex="{{card.flipped ? -1 : 0}}" и такая же, но с !card.flipped вместо card.flipped.

My полный код:

<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 Документы