41

AngularJS Noobハンドブックには、クラス操作を単純な式とバインディングに減らすコードが含まれています。

<a ng-click="flags.open=!flags.open">...<div ng-class="{active:flags.open}">

しかし、ng-classの式の構文は何ですか？垂直バー（|）がフィルターを通過し、フィルターにコロンの後にパラメーターを渡すことができることを理解していますが、上記のコードは別のことを行っています。右側のスコープ変数がtrueと評価された場合、左側の式が含まれます。それ以外の場合は削除されます。

これはng-classディレクティブに固有ですか？これを説明するドキュメントがhttp://docs.angularjs.orgにありますか？

4

5 に答える 5

100

これはドキュメントで簡単に（私の意見では、あまりにも簡単に）言及されていngClassます。オブジェクトを に渡すと、そのキーの値が trueの場合、オブジェクトのngClass各キーがクラスとして要素に適用されます。例えば：

$scope.first = true
$scope.second = false
$scope.third = true

と

<div ng-class="{a: first, b: second, c: third}"></div>

結果として

<div class="a c"></div>
于 2013-02-06T17:35:58.503 に答える
45

おそらく次のようなものも見たことがあるでしょう。

<div ng-class="{true: 'complete'}[item.Id != 0]"></div>

非常に優れた構文。

編集: ここで何が起こるかというと、要素に "complete"classが追加されますif(item.Id != 0)。または、次のように書くこともできます<div ng-class="{false: 'cookieless'}[monsterEatsCookies('Elmo')]。MonsterEatsCookies 関数によって決定されるように、Elmo はクッキーを食べないため、この関数はfalsehtml 要素を返すため、 というクラスが取得cookielessます。

簡単な例: <div ng-class="{false: 'DoubleNegative'}[1 == 0]. 1 !== 0これは " false" -- " DoubleNegative" クラスが要素に追加されます。

<div ng-class="{  true:   'complete'  } [item.Id != 0]"></div>

`

            | |      | |          | | |            |
            | |result| |className | | |            |
            |                     | | |            |
            |       function      | | | condition  |

補遺

また、さまざまなキーを使用して自分の状態にマッピングできることに気付きました。例えば：

ng-class="{ true: 'highlight', undefined: 'mute' }[ item.hasValue ]"

item に " " プロパティがない場合、muteクラスが適用されます。hasValueさらに、任意の型または値にクラスを適用できます。

{'Jonathan Chapman': 'embolden', '[object Object]': 'hide'}[ item.toString() ]

次のコレクションでは、オブジェクトであるアイテムを非表示にしながら、人物の名前を太字にします。

[
    'Jonathan Chapman',
    { aka: 'Johnny Applyseed' },
    'Brad Pitt',
    { details: 'Fights Zombies' }
]

これにより、任意の $scope プロパティで特定の値を監視できます。これは、場合によっては非常に便利になると思います。

乾杯

于 2013-08-08T13:09:54.880 に答える
6 
ng-click="flags.open=!flags.open"

flags.openの値を true または false に切り替えます。
と 

ng-class="{active:flags.open}"

activeの値に基づいてクラスが存在するかどうかを決定しますflags.open。上記の例を示すFiddle
を 参照してください。

于 2013-12-30T09:54:50.290 に答える
1

フィルターを使用して式を渡す方法は次のとおりです。

 <div ng-class="{ 'customer-page': ('customer' | isRoute), 
  'orders-page': ('orders' | isRoute)  }">....</div>
于 2014-09-04T08:07:25.797 に答える