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.
!= 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.
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.
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.
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.
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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With