ng-if not equal to

Question

I have a simple ng-reapt that displays a list of values   On some of the outputs  i have a couple of ng-if to show hide DIVs   HTML    lt div ng-repeat  details in myDataSet  gt        lt p gt    details Name    lt  p gt       lt p gt    details DOB     lt  p gt           lt div ng-if  details Payment 0  Status     0   gt              lt p gt No payment lt  p gt          lt  div gt           lt div ng-if  details Payment 0  Status     1     details Payment 0  Status     2   gt              lt p gt Late lt  p gt          lt  div gt           lt div ng-if  details Payment 0  Status     3     details Payment 0  Status     4     details Payment 0  Status     5   gt              lt p gt Some payment made lt  p gt          lt  div gt           lt div ng-if  details Payment 0  Status     6   gt              lt p gt Late and further taken out lt  p gt          lt  div gt           lt div ng-if  details Payment 0  Status     0     details Payment 0  Status     1     details Payment 0  Status     2     details Payment 0  Status     3     details Payment 0  Status     4     details Payment 0  Status     5     details Payment 0  Status     6   gt              lt p gt Error lt  p gt          lt  div gt        lt p gt    details Gender   lt  p gt    lt  div gt    My application is displaying an error when attempting to display the    section

User · Answer

There are pretty good solutions here but they don't help to understand why the problem actually happens.

But it's very simple, you just need to understand how logic OR || works. Whole expression will evaluate to true when either of its sides evaluates to true.

Now let's look at your case. Assume whole details.Payment[0].Status is Status and it's a number for brevity. Then we have Status != 0 || Status != 1 || ....

Imagine Status = 1:

( 1 != 0 || 1 != 1 || ... ) =
(  true  || false  || ... ) =
(       true       || ... ) = ... = true

Now imagine Status = 0:

( 0 != 0 || 0 != 1 || ... ) =
( false  ||  true  || ... ) =
(       true       || ... ) = ... = true

As you it doesn't even matter what you have as ... as logical OR of first two expressions gives you true which will be the result of the full expression.

What you actually need is logical AND && that will be true only if both its sides are true.

User · Answer

Try this   ng-if  details Payment 0  Status     6      Sorry about that  but I think you can use ng-show or ng-hide

User · Answer

That s all unnecessary logic in partials  reduce it to something like this and process your data in controller service where it should be   lt div ng-repeat  details in myDataSet  gt        lt p gt    details Name    lt  p gt       lt p gt    details DOB     lt  p gt       lt p gt   details Payment 0  StatusName   lt  p gt       lt p gt    details Gender   lt  p gt    lt  div gt    JS   angular forEach myDataSet Payment  function  payment      if payment Status     0       payment StatusName    No Payment       else if payment Status     1    payment Status     2       payment StatusName    Late       else if payment Status     3    payment Status     4    payment Status     5       payment StatusName    Some payment made       else if payment Status     6       payment StatusName    Late and further taken out      else      payment StatusName    Error

User · Answer

Try below solution  ng-if  details Payment 0  Status     0    Use below condition   prefix with true condition  instead of above  ng-if   details Payment 0  Status     0

User · Answer

Here is a nifty solution with a filter   app filter  status   function        var statusDict         0   No payment       1   Late       2   Late       3   Some payment made       4   Some payment made       5   Some payment made       6   Late and further taken out          return function status        return statusDict status      Error              Markup    lt div ng-repeat  details in myDataSet  gt     lt p gt    details Name    lt  p gt     lt p gt    details DOB     lt  p gt     lt p gt    details Payment 0  Status   status    lt  p gt     lt p gt    details Gender   lt  p gt   lt  div gt

User · Answer

This is now possible as of AngularJS 1 5 10  using ng-switch-when-separator   x000D   x000D  var app   angular module  app         x000D   x000D  app controller  ctrl   function  scope    x000D       scope myDataSet     Name   Michelle   Gender   Female   DOB   01 12 1986   Payment    Status   0      Name   Steve   Gender   Male   DOB   11 12 1982   Payment    Status   1      Name   Dan   Gender   Male   DOB   03 22 1976   Payment    Status   2      Name   Doug   Gender   Male   DOB   02 02 1980   Payment    Status   3      Name   Mary   Gender   Female   DOB   04 02 1976   Payment    Status   4      Name   Cheyenne   Gender   Female   DOB   07 10 1981   Payment    Status   5      Name   Bob   Gender   Male   DOB   02 16 1990   Payment    Status   6      Name   Bad data   Gender   Blank   DOB   01 01 1970   Payment    Status   7       x000D      x000D   lt script src  https   code angularjs org 1 5 10 angular min js  gt  lt  script gt  x000D   lt div ng-app  app  ng-controller  ctrl  gt  x000D       lt div ng-repeat  details in myDataSet  ng-switch on  details Payment 0  Status  gt  x000D   x000D           lt p gt    details Name    lt  p gt  x000D           lt p gt    details DOB     lt  p gt  x000D   x000D           lt div ng-switch-when  0  gt  x000D               lt p gt No payment lt  p gt  x000D           lt  div gt  x000D   x000D           lt div ng-switch-when  1 2  ng-switch-when-separator     gt  x000D               lt p gt Late lt  p gt  x000D           lt  div gt  x000D   x000D           lt div ng-switch-when  3 4 5  ng-switch-when-separator     gt  x000D               lt p gt Some payment made lt  p gt  x000D           lt  div gt  x000D   x000D           lt div ng-switch-when  6  gt  x000D               lt p gt Late and further taken out lt  p gt  x000D           lt  div gt  x000D   x000D           lt div ng-switch-default gt  x000D               lt p gt Error lt  p gt  x000D           lt  div gt  x000D           x000D           lt p gt    details Gender   lt  p gt  x000D   x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

It is better to use ng-switch   lt div ng-switch on  details Payment 0  Status  gt       lt div ng-switch-when  1  gt           lt  -- code to render a large video block-- gt       lt  div gt       lt div ng-switch-default gt           lt  -- code to render the regular video block -- gt       lt  div gt   lt  div gt

User · Answer

I don t like  hacks  but in a quick pinch for a deadline I have done this   lt li ng-if  edit     false  amp  amp  filtered length     0  gt       lt p ng-if  group title     Dispatcher News   style  padding  5px  gt No links in group  lt  p gt   lt  li gt    Yes  I have another inner nested ng-if  I just didn t like too many conditions on one line

[angularjs] ng-if, not equal to?

Examples related to angularjs

Examples related to angularjs-scope

Examples related to angularjs-ng-repeat

Examples related to ng-switch

Examples related to angular-ng-if