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">&nbsp; &nbsp; <textarea ng-model="card.front" class="form-control flashcard-content"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tabindex="{{card.flipped ? -1 : 0}}"></textarea></div><div class="flashcard-back">&nbsp; &nbsp; <textarea ng-model="card.back" class="form-control flashcard-content"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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>