AngularJs ng-if directive not working?

Question

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>

why not use ng-class directive check the docs here docs.angularjs.org/api/ng/directive/ngClass — Ayoub
– Ayoub, Commented May 27, 2016 at 15:39
If I remember correctly, you want to wrap Live etc in single quotes, unless they are scope variables — Sterling Archer
– Sterling Archer, Commented May 27, 2016 at 15:39
To expand on @AyoubOlk comment, here is a working example of ng-class: jsfiddle.net/qbe07cy4 — Rob
– Rob, Commented May 27, 2016 at 15:51

Shadi Shaaban · Accepted Answer · 2016-05-27 15:42:18Z

2

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>

answered May 27, 2016 at 15:42

Shadi Shaaban

1,7081 gold badge11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Huy Chau · Accepted Answer · 2016-05-27 15:54:37Z

Live is a string not variable and to compare two elements, please use === (compare value and compare type) instead of == (just compare value). Change:

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

To:

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

But in your case, I think you should use ng-class. Change:

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

To:

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

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

Collectives™ on Stack Overflow

AngularJs ng-if directive not working?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related