Angularjs：現在のアイテムのプロパティに基づいてng-repeat内のエレメントにクラスを設定する

ng-repeatのエレメントにクラスを適用しようとしています。さらに重要なのは、どのクラスがプロパティに基づいて適用されるかを決めたい現在反復されているモデルのメンバの名前です。説明するために、私はRESTエンドポイントから取得しているテーブルをレンダリングし、テーブルにレンダリングします。Angularjs：現在のアイテムのプロパティに基づいてng-repeat内のエレメントにクラスを設定する

<tr ng-repeat="building in buildings"> 
...... 
    <td> 
     <i ng-class="{'icon-check' : building.elevator, 'icon-check-empty' : building.elevator}"></i> 
      {{building.elevator}} 
    </td> 
</tr>

問題は、私がレンダリングされている建物のelevatorプロパティの値に基づいて<i>要素にクラスを設定することができないんだということです。レコードの場合、{{building.elevator}}は、レスポンスの内容に基づいてtrueまたはfalseと表示されます。

私はまた、運がないクラス属性の3値演算子を使用しようとしました。

だけではなく== '真の'/'false' を

building.elevator：

building.elevator

を

も使ってみました

結果はありません。ここで私が紛失していることを教えてください。

おかげ

EDIT
問題はフォント恐ろしいのために障害のあるクラスにいたが、私はおそらく、チェック/チェックなしのソリューションのように見えた何かを探しながら、もはや存在しないクラスを拾ってきました。あなたの応答のための
[{..., "elevator":false, ...}] 
おかげNikhilesh Shivarathri & user3273700：
<i ng-class="{'fa fa-check-circle-o' : building.elevator, 'fa fa-circle-o' : !building.elevator}"></i> 
と私はなっていたサーバの応答の関連部分：

参考のために、ここで動作するコードです。あなたは、最後に欠陥のクラスを疑うようになった選択肢とポインタで私を助けました。

ここで最終回答が検査のためにここに示したコードに関連していない場合、私は今質問にどうしますか？

出典

2016-09-04 bbd127

building.elevatorの型と値は何ですか？ –

編集を確認してください。 – bbd127

私はあなたの要件のサンプルアプリケーションを作成しました。あなたのアプリケーションで何かが不足しているかどうかを以下の例から確認してください。

をに変更すると、のデータに文字列ではなくブール値のフィールドが含まれています。

var app = angular.module('sample', []); 
 

 
app.controller('samplecontroller', function($scope) { 
 
    $scope.values = [{ 
 
    booleanField: 'true', 
 
    name: 'Jospeh' 
 
    }, { 
 
    booleanField: 'false', 
 
    name: 'John' 
 
    }] 
 

 
});

.test-false { 
 
background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="sample"> 
 
    <div ng-controller="samplecontroller"> 
 
    <table> 
 
     <tr ng-repeat="value in values"> 
 
     <td>{{value.name}}<td> 
 
     <td ng-class="{'test-false': value.booleanField !== 'true'}">{{value.booleanField}}</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</body>

出典

2016-09-04 17:04:05

Angularjs：現在のアイテムのプロパティに基づいてng-repeat内のエレメントにクラスを設定する

答えて

関連する問題