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 元素，并使用 jQuery 设置其 tabindex 属性，那么我的问题似乎就可以解决，但是我似乎无法访问文本区域的元素（这将友善点，因为我也想稍后关注它）。

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-*仅在特殊情况下才需要该语法。

Answer 2

相关部分与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>