Angular Condition

Question

Please help me! I need to create condition IF...ELSE with AngularJS my index.html is:

<ons-list-item modifier="chevron" class="list-item-container" ng-repeat="item in categories track by $index"> <a href="#/parts/{{ item.idold }}">
<ons-row>
<ons-col>
<div class="name">
{{ item.category }} - {{ item.orgs }}
</div>
</ons-col>
<ons-col width="40px"></ons-col>
</ons-row></a>
</ons-list-item>

Where {{ item.orgs }} can be 0 or 1...I need to make IF {{ item.orgs }}=1 -> href="#/parts/{{ item.idold }}" ELSE href="#/parts/detail/{{ item.id }}"

• JaKXz: You should use ng-href in your <a> tag if your links are going to have markup.

Answer 1

Why don't you try creating a function in your scope that does the logic you're describing and then invoke the function within the {{ items.orgs }} part? That should work and output correctly to your HTML.

Answer 2

You can use ?: conditional operators in AngularJS expressions. They work the same as other languages.

<a ng-href="#/parts/{{ item.orgs == 1 ? item.idold : item.id }}">

You're injecting backward compatibility rules into your templates. That's not a good practice. As @WillsonMock said, it's better to do this somewhere else like a controller or directive.

Alternatively, if the default value for item.idold is falsy then you won't need the ?: operators. Just use a || OR logical operator. JavaScript will use the value of the last truthy variable.

So this can be simplified.

<a ng-href="#/parts/{{ item.idold || item.id }}">

I find the above easier to read for some strange reason.

Answer 3

use ng-if

<a ng-href="#/parts/{{ item.idold }}" ng-if="item.orgs">{{ item.category }} </a>
<a ng-href="#/parts/{{ item.id }}" ng-if="!item.orgs">{{ item.category }} </a>