Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng-if, not equal to?

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:

<div ng-repeat="details in myDataSet">

    <p>{{ details.Name }}</p>
    <p>{{ details.DOB  }}</p>

       <div ng-if="details.Payment[0].Status == '0'">
           <p>No payment</p>
       </div>

       <div ng-if="details.Payment[0].Status == '1' || details.Payment[0].Status == '2'">
           <p>Late</p>
       </div>

       <div ng-if="details.Payment[0].Status == '3' || details.Payment[0].Status == '4' || details.Payment[0].Status == '5'">
           <p>Some payment made</p>
       </div>

       <div ng-if="details.Payment[0].Status == '6'">
           <p>Late and further taken out</p>
       </div>

       <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'">
           <p>Error</p>
       </div>

    <p>{{ details.Gender}}</p>

</div>

My application is displaying an error when attempting to display the != section.

like image 534
Oam Psy Avatar asked Jun 13 '14 08:06

Oam Psy


People also ask

What is != In Angular?

!= operator checks the un equality of two operands. It is similar to == except it returns true if operands are not equal. !== operator is similar to === except it returns true if operands are not equal.

How do you check for equal conditions in ngIf?

You are doing an assignment using single = operator. Use double equal to == operator to check equality or better use === to check strict equality. You should use === in Javascript instead. That's true, but if the developer did not use types appropriately, the result will not be displayed.

What is * ngIf?

A shorthand form of the directive, *ngIf="condition" , is generally used, provided as an attribute of the anchor element for the inserted template. Angular expands this into a more explicit version, in which the anchor element is contained in an <ng-template> element.

Can we use ngIf in P tag?

NgIf is a directive That means, that it can be added to any tag in your template. This includes regular HTML-tags like the "p"-tag shown above and even angular component selectors.


2 Answers

It is better to use ng-switch

<div ng-switch on="details.Payment[0].Status">
    <div ng-switch-when="1">
        <!-- code to render a large video block-->
    </div>
    <div ng-switch-default>
        <!-- code to render the regular video block -->
    </div>
</div>
like image 196
Charnjeet Singh Avatar answered Sep 28 '22 10:09

Charnjeet Singh


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:

<div ng-repeat="details in myDataSet">
  <p>{{ details.Name }}</p>
  <p>{{ details.DOB  }}</p>
  <p>{{ details.Payment[0].Status | status }}</p>
  <p>{{ details.Gender}}</p>
</div>
like image 35
Ilan Frumer Avatar answered Sep 28 '22 11:09

Ilan Frumer