Can I clean up these ng-if statements in AngularJS templates?

Question

I have the following AngularJS template.

  <tr>
    <td ng-if="condition1">
      Hello World
    </td>
    <td ng-if="condition2">
      A <a ui-sref="mystate1({a: 1, b: 2})"></a>
    </td>
    <td ng-if="condition3">
      B <a ui-sref="mystate1({a: 1, b: 2})"></a>
    </td>
  </tr>

Can I simplify or clean-up or combine these three ng-if statements??

condition1, condition2 and condition3 are mutually exclusive. However, they are not based off a single expression so a switch statement won't work? Can I use an if-then-else construct?

depending on what the conditions are `ng-switch` may work for you https://docs.angularjs.org/api/ng/directive/ngSwitch — rob, Sep 26 '16 at 16:41
ng-switch will do the work. You only need to define a property in your controller, based on your logic, and use it in your view. These way you replace logic in your view with logic in your controller or service — Alberto, Sep 26 '16 at 16:53
it seems as though you answered your own question here. these options are mutually exclusive, but based on different conditions, which implies that some or all could exist simultaneously, and as such can't be combined into a single statement. — Claies, Sep 26 '16 at 16:55
My frustration is that there seems to be no `ng-else-if` and no `ng-else`. Why on earth not?? — Saqib Ali, Sep 26 '16 at 17:17
I once wrote an `ngSelectFirst` for this purpose. It would show the first child element for which its `ngSelectFirstIf` attribute evaluated to truthy. Unfortunately I never found the time to submit a pull request, and that code is now inaccessible to me. That's just to say that you're not the only one missing this feature :) — Thomas, Sep 26 '16 at 17:21
See this question and all the answers for your options (which are, BTW, very good) http://stackoverflow.com/q/15810278/870729 As for "why not", who knows, but it's not necessary if you can adjust the way you think about if / else conditions. `if/else` can be accomplished with two `ng-if` statements. `if/elseif/else` can be accomplished with `ng-switch`. IMO as a developer, long `if/else if/else` statements are usually not the best way. — random_user_name, Sep 26 '16 at 17:22
Additionally, the beauty of angular is that you can **write your own directives**. If you need `if/else`, this answer seems to reference a directive they've created, and would be simple for you to incorporate: http://stackoverflow.com/a/26187174/870729 — random_user_name, Sep 26 '16 at 17:25
No Cale_b, if/elseif/else cannot be accomplished with ng-switch if the conditions on those branches key off of different expressions. — Saqib Ali, Sep 26 '16 at 19:01

Axel Prieto · Accepted Answer · 2016-09-26T16:58:39.723

1

If they are mutually exclusive, then yes, you can simplify condition2 and condition3 and only use one condition for both (since the output is the same).

EDIT: Based on your update, you could simplify the logic like this:

<tr>
<td ng-if="condition1">
  Hello World
</td>
<td ng-if="condition2 || condition3">
  {{condition2 ? 'A' : 'B'}}
  <a ui-sref="mystate1({a: 1, b: 2})"></a>
</td>

Or you could also use ng-switch.

edited Sep 26 '16 at 16:58

answered Sep 26 '16 at 16:46

Axel Prieto

535
10
20

Sorry, there was a mistake in my original question which I corrected based on your response. The output of the second and third branches is slightly different. – Saqib Ali Sep 26 '16 at 16:52
@SaqibAli: Updated. – Axel Prieto Sep 26 '16 at 16:58
My frustration is that there seems to be no `ng-else-if` and no `ng-else`. Why on earth not?? – Saqib Ali Sep 26 '16 at 17:18
To get a behavior similar to if/else you could try using 'switch': https://docs.angularjs.org/api/ng/directive/ngSwitch and use the ng-switch-default for the else flow. – Axel Prieto Sep 26 '16 at 17:52

Can I clean up these ng-if statements in AngularJS templates?

1 Answers1