Eoghan Buckley Eoghan Buckley - 6 months ago 38
AngularJS Question

AngularJs ng-if directive not working?

I am very new to AngularJs so I'm unsure of the

ngif
syntax. I have a table and I need to change the class of the
<td>
depending on the value of
component.status
.
Everything works except for the
ngif
directive

My Array:

$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"}
];


My attempt so far:

<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

Your code will work, however you need to encapsulate the status value with quotes '' ( 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>