web-dev-qa-db-ja.com

AngularJS-複数のng-classディレクティブを追加する方法は？

ng-classディレクティブを使用する2つの異なる方法を次に示します。同じ要素で両方が必要ですが、それは機能しません。

Ng-classでのオブジェクトの使用

http://plnkr.co/edit/uZNK7I?p=preview

<div ng-repeat="item in [1, 2, 3, 4, 5]" 
     ng-class="{ first: $first, last: $last }">{{item}}</div>

正しく結果

<div class="first">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="last">5</div>

Ng-classでの式の使用

http://plnkr.co/edit/tp6lgR?p=preview

<div ng-repeat="item in [1, 2, 3, 4, 5]" 
     ng-class=" 'count-' + ($index + 1) ">{{item}}</div>

正しく結果

<div class="count-1">1</div>
<div class="count-2">2</div>
<div class="count-3">3</div>
<div class="count-4">4</div>
<div class="count-5">5</div>

では、一緒に使ってみませんか？

動的クラス名（'count-' + nなど）が必要ですが、複数のクラスのオブジェクト構文も必要です。

2つのng-class属性（ http://plnkr.co/edit/OLaYke?p=preview ）だけを使用することはできません。最初の属性のみが機能します。

何か提案はありますか？

javascriptangularjsng-class
20
Michael Lewis

2つ目はng-classを使用しないでください。

<div class="count-{{$index + 1}}" ng-class="{ first: $first, last: $last }">
20
tymeJV

ngClassには、式とオブジェクトの両方を含む配列を指定する必要があります。

<div ng-class="['count-' + ($index + 1), { first: $first, last: $last }]">

注：承認された回答で提案された解決策（ngClassディレクティブとclass属性での補間）は悪い習慣です。詳細は here および here を参照してください。

7
Maxim Kulikov

それらを一緒に混合する必要がある場合は、文字列の連結を行ってください：

ng-class="'count-' + ($index+1) + ($first?' first':($last?' last':''))"

または、より明確なビューのために：

ng-class="'count-' + ($index+1) + ($first?' first':'') + ($last?' last':'')"

expの値が変更されると両方とも更新されるため、class="{{exp}}"の代わりにng-class="exp"を使用することの既知の利点はありません。逆に、最初のものを使用すると、ページがフリーズする場合があります。

2
Lucia

属性ng-classを;で分離できると思います

試してください：

ng-class=" 'count-' + ($index + 1) ; { first: $first, last: $last }"
0
Pedro Araújo