There are a few things to consider here:
Assignment operator vs equality operator
Use the javascript equality operator (i.e. ==
) instead of assignment operator (i.e. =
):
ng-if="(country=='ireland' || country=='united kingdom') || (name=='John' || name=='Joe')"
Operator Precedence and Associativity
Additionally, consider operator precedence - whether the conditions joined with the logical AND (i.e. &&
) should be evaluated before those joined via logical OR (i.e. ||
). Use the grouping operators (i.e. (
and )
- A.K.A. parentheses) to use right-associativity when needed.
For instance, this line:
(settings.eur && title.usa != undefined || title.leak != undefined)
Could be altered for right-associativity:
(settings.eur && (title.usa != undefined || title.leak != undefined))
Or to keep left-assciativity:
((settings.eur && title.usa != undefined) || title.leak != undefined)
Move logic to controller
As has been mentioned in comments, the logic in that large conditional should likely be moved into some controller logic. This will make it simpler to update and separate the business logic from the markup.
One way to do that is to declare a function like in the example below. Perhaps a simpler way than checking if variables are undefined
is to initialize them to a default boolean value (e.g. false
), as is done in the example below. Try toggling the checkboxes:
angular.module('app', [])
.controller('cont', function($scope) {
$scope.country = 'ireland';
$scope.name = 'Joe';
$scope.settings = {
eur: true,
leak: false,
usa: false
};
$scope.shouldShowLargerComplexContainer = function() {
if (($scope.settings.leak == false && $scope.settings.eur == false && $scope.settings.usa == false)) {
return true;
}
return false;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="cont">
country? name?
<div ng-if="(country=='ireland' || country=='united kingdom') || (name=='John' || name=='Joe')">country Ireland and name is joe or john</div>
Complex logic div?
<div ng-if="shouldShowLargerComplexContainer()">larger complex div</div>
<div>
<input type="checkbox" ng-model="settings.eur" />eur</div>
<div>
<input type="checkbox" ng-model="settings.leak" />leak</div>
<div>
<input type="checkbox" ng-model="settings.usa" />usa</div>
</div>