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每張card in cards制作一張抽認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 方面更有經驗的人可以為我指明正確的方向。 如果我可以從我的翻頁紙中的 card 變量中獲取 DOM 元素，並使用 jQuery 設置其 tabindex 屬性，似乎我的問題將得到解決，但是我似乎無法訪問 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-*語法。

有關更多信息，請參閱

• AngularJS 開發者指南 - 插值
• AngularJS 開發人員指南 - 用於綁定任意屬性的ngAttr

Answer 2

感謝@Phix 建議使用ng-attr 。

相關部分是ng-attr-tabindex="{{card.flipped ? -1 : 0}}"和相同但使用!card.flipped而不是card.flipped 。

我的完整代碼是：

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

角度文檔