web-dev-qa-db-ja.com

関数と式を備えたngクラス

Ng-classを使用して2つのクラスを追加する必要があります。1つのクラスは関数で取得し、もう1つは式で取得する必要があります-以下は使用しているコードですが、構文エラーが発生します-

 <div class="field-icon" ng-class="getFieldClass(entry.entry_type_id) , 'used':  entry_map[entry.guid] > 0" ></div>

関数と式を一緒に使用できる場合、正しい構文は何でしょうか。

angularjsng-class
12
Vivek Panday

ng-class構文が間違っていました。ng-class="{'used': expression2 }"のようなJSON形式である必要があります。式は、クラスが追加または削除されることに基づいてBooleanを返しますattribute値。

getFieldClassメソッドがクラス名を返すので、getFieldClassメソッドで両方のクラスロジックをシフトできます。

マークアップ

<div class="field-icon" 
ng-class="getFieldClass(entry)" ></div>

コード

$scope.getFieldClass = function(entry){
   //use entry.entry_type_id here to decide class which is first
   //'text-box-icon' class has been selected on some condition based on entry.entry_type_id
   return {"text-box-icon": true, 'used': $scope.entry_map[entry.guid] > 0};
}
10
Pankaj Parkar

関数と式の両方を配列に書き込むことができます。

例：

 <div class="field-icon" ng-class="[getFieldClass(entry.entry_type_id), {'used':entry_map[entry.guid] > 0}]"></div>

ここでの実例： https://plnkr.co/edit/OWfkAwJiombrehiS7p9o?p=preview

6
rajagopalx