AngularJs ng-ifディレクティブが機能しない場合

Question

AngularJsの新機能ですので、ngifの構文が不明です。私はテーブルを持っており、component.statusの値に応じて<td>のクラスを変更する必要があります。これまで

$scope.components = 
    [ 
    {type: "Dispacther",  component: "Dispatcher2", created: "2016-05-20T01:44:56.113", status: "Live"}, 
    {type: "Mobilizer",   component: "Mobility3", created: "2016-05-25T07:34:30.019", status: "Down"}, 
    {type: "Listener",   component: "ADT 22146", created: "2016-05-20T01:44:56.113", status: "Live"}, 
    {type: "OutBound Charge", component: "Billing 92", created: "2016-05-20T01:44:56.113", status: "Live"}, 
    {type: "Listener",   component: "22064",  created: "2016-05-20T01:44:56.113", status: "Live"}, 
    {type: "Dispacther",  component: "Dispacther1", created: "2016-05-21T00:48:50.433", status: "Warning"} 
]; 

私の試み： すべてがngifディレクティブ

マイアレイ以外の作品

<tr ng-repeat="component in components"> 
    <td >{{component.type}}</td> 
    <td>{{component.component}}</td> 
    <td>{{component.created}}</td> 
    <td ng-if="component.status == Live" class="alert-success">{{component.status}}</td> 
    <td ng-if="component.status == Warning" class="alert-warning">{{component.status}}</td> 
    <td ng-if="component.status == Down" class="alert-danger">{{component.status}}</td> 
    </tr> 

Answer 1

あなたのコードは動作します、しかし、あなたは、「引用符でステータス値をカプセル化する必要があります'（ng-if = "component.status ==' Live '"）

<tr ng-repeat="component in components"> 
    <td >{{component.type}}</td> 
    <td>{{component.component}}</td> 
    <td>{{component.created}}</td> 
    <td ng-if="component.status == 'Live'" class="alert-success">{{component.status}}</td> 
    <td ng-if="component.status == 'Warning'" class="alert-warning">{{component.status}}</td> 
    <td ng-if="component.status == 'Down'" class="alert-danger">{{component.status}}</td> 
    </tr> 

Answer 2

Liveは可変ではない文字列であり、2つの要素を比較するには、==（value）の代わりに===（valueと比較し、typeを比較してください）を使用してください。 変更を行います。

<td ng-if="component.status == Live" class="alert-success">{{component.status}}</td> 

：

<td ng-if="component.status === 'Live'" class="alert-success">{{component.status}}</td> 

しかし、あなたの場合、私はあなたがng-classを使うべきだと思います。 変更：

<td ng-if="component.status == Live" class="alert-success">{{component.status}}</td> 
<td ng-if="component.status == Warning" class="alert-warning">{{component.status}}</td> 
<td ng-if="component.status == Down" class="alert-danger">{{component.status}}</td> 

へ：

<td ng-class="{'alert-success': component.status === 'Live', 'alert-warning': component.status === 'Warning', 'alert-danger': component.status === 'Down'}">{{component.status}}</td> 

ng-class内側：{'alert-success': component.status === 'Live', 'alert-warning': component.status === 'Warning', 'alert-danger': component.status === 'Down'}