angularjs - ng-if Multiple Conditions

Question

So this has been asked before but my question isnt as simple as ng-if="country == 'ireland' || country='United Kingdom'"

I need to do something like:

ng-if="(country='ireland' || country='united kingdom') || (name='John' || name='Joe')"

What im doing is this:
ng-if=" (settings.eur && title.usa != undefined || title.leak != undefined) || (settings.usa && title.eur != undefined || title.leak != undefined) || (settings.leak && title.eur != undefined || title.usa != undefined) || (settings.leak == false && settings.eur == false && settings.usa == false)"

But it's only triggering the first line or at least that is what it seems to be doing.

Answer 1

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>

Answer 2

The Sam's response is ok, anyway looking at this with a wider perspective you should think again about if this decision should be taken in the view level or in the controller.

As a general rule try to not put any logic inside the view to avoid split the logic and increase the maintenance cost of property. (also is easier to test the logic inside the JS part)