I am trying to get started on angular development. And after reviewing the documentation some questions persist. How do i best write a ng-if with multiple arguments corresponding to
if( a && b) or if( a || b )
Add a comment
|
5 Answers
It is possible.
<span ng-if="checked && checked2">
I'm removed when the checkbox is unchecked.
</span>
Comments
Just to clarify, be aware bracket placement is important!
These can be added to any HTML tags... span, div, table, p, tr, td etc.
AngularJS
ng-if="check1 && !check2" -- AND NOT
ng-if="check1 || check2" -- OR
ng-if="(check1 || check2) && check3" -- AND/OR - Make sure to use brackets
Angular2+
*ngIf="check1 && !check2" -- AND NOT
*ngIf="check1 || check2" -- OR
*ngIf="(check1 || check2) && check3" -- AND/OR - Make sure to use brackets
It's best practice not to do calculations directly within ngIfs, so assign the variables within your component, and do any logic there.
boolean check1 = Your conditional check here...
...
Comments
For people looking to do if statements with multiple 'or' values.
<div ng-if="::(a || b || c || d || e || f)"><div>
2 Comments
Stefan
what are the two dots in front? Shouldn't it work without them and the brackets? Based on javaCity's example, this doesn't even work plnkr.co/edit/qdIysgbxtEUVB2WMJa1i?p=preview
Brendan Metcalfe
the dots are Angular's syntax for one-time (as opposed to two-way) binding
Yes, it's possible. for example checkout:
<div class="singleMatch" ng-if="match.date | date:'ddMMyyyy' === main.date && match.team1.code === main.team1code && match.team2.code === main.team2code">
//Do something here
</div>
Comments
Another way to do this is by using a function in controller scope.
Controller
var myApp = angular.module('myApp',[]);
myApp.controller('MyController', ['$scope', function($scope) {
$scope.ControllerModel = {
check1: true,
check2: false,
};
$scope.Validate_ItemOfMyList(item) {
if (item == null) item = $scope.ControllerModel;
return item.check1 && !item.check2;
};
}]);
View
<p ng-if="Validate_ItemOfMyList()" >This item is valid!</p>
Using ng-repeate
<div class="myClass"
ng-repeat="item in MyList"
>
<p ng-if="Validate_ItemOfMyList(item)">This item is valid!</p>
</div>
Comments
