Should I refactor multiple conditions on ng-if in angularjs?

Question

I have this code and I'm wondering if there is a better style to write this, so that there is less logic in the view.

<span ng-if="status == 'state1' || status == 'state2'">Foobar</span>
<span ng-if="status == 'state3'">Baz</span>

Answer 1

Yes, I think refactoring is wise. Your example is simple, but it is easy to imagine having many more conditions. I've done something like this, when many elements have complicated display conditions:

$scope.render = {
  foobar: function() {
    return $scope.status == 'state1' || $scope.status == 'state2'
  },
  baz: function() {
    return $scope.status == 'state3'
  }
}

Then the usage in the view is:

<span ng-if="render.foobar()">Foobar</span>
<span ng-if="render.baz()">Baz</span>

Demo: http://plnkr.co/lv4w9dLN8oN0bBF23VKp

This keeps the logic footprint in the view small, and allows you to easily reuse the logic on multiple elements.

Answer 2

Not sure if this is any better, but here is an option using ngSwitch. It does remove some logic (assuming you only have those three states):

<div ng-switch on="status">
    <span ng-switch-when="state3">Baz</span>
    <span ng-switch-default>Foobar</span>
</div>

Answer 3

If you expect that your content will grow in future, you can wrap it into directive with template or even so called conditional directive: link