Eoghan Buckley Eoghan Buckley - 2 years ago 164
AngularJS Question

AngularJs ng-if directive not working?

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

syntax. I have a table and I need to change the class of the
depending on the value of
Everything works except for the

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 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>

Answer Source

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 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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download