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.
This question is related to
angularjs
angularjs-scope
angularjs-ng-repeat
ng-switch
angular-ng-if
I don't like "hacks" but in a quick pinch for a deadline I have done this
<li ng-if="edit === false && filtered.length === 0">
<p ng-if="group.title != 'Dispatcher News'" style="padding: 5px">No links in group.</p>
</li>
Yes, I have another inner nested ng-if, I just didn't like too many conditions on one line.
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>
This is now possible as of AngularJS 1.5.10, using ng-switch-when-separator
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_
<script src="https://code.angularjs.org/1.5.10/angular.min.js"></script>_x000D_
<div ng-app="app" ng-controller="ctrl">_x000D_
<div ng-repeat="details in myDataSet" ng-switch on="details.Payment[0].Status">_x000D_
_x000D_
<p>{{ details.Name }}</p>_x000D_
<p>{{ details.DOB }}</p>_x000D_
_x000D_
<div ng-switch-when="0">_x000D_
<p>No payment</p>_x000D_
</div>_x000D_
_x000D_
<div ng-switch-when="1|2" ng-switch-when-separator="|">_x000D_
<p>Late</p>_x000D_
</div>_x000D_
_x000D_
<div ng-switch-when="3|4|5" ng-switch-when-separator="|">_x000D_
<p>Some payment made</p>_x000D_
</div>_x000D_
_x000D_
<div ng-switch-when="6">_x000D_
<p>Late and further taken out</p>_x000D_
</div>_x000D_
_x000D_
<div ng-switch-default>_x000D_
<p>Error</p>_x000D_
</div>_x000D_
_x000D_
<p>{{ details.Gender}}</p>_x000D_
_x000D_
</div>_x000D_
</div>
_x000D_
That's all unnecessary logic in partials, reduce it to something like this and process your data in controller/service where it should be
<div ng-repeat="details in myDataSet">
<p>{{ details.Name }}</p>
<p>{{ details.DOB }}</p>
<p>{{details.Payment[0].StatusName}}</p>
<p>{{ details.Gender}}</p>
</div>
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';
}
})
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
.
Try this:
ng-if="details.Payment[0].Status != '6'".
Sorry about that, but I think you can use ng-show or ng-hide.
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'"
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>
Source: Stackoverflow.com