angularjs if statements?

Question

So I\'m running through the tutorial for AngularJS:

I have an array defined in the controller and i\'m returning different points in the array by calling when i\'m l

Answer 1

I think the answer needs an update.

Previously you could use ngIf directive from AngularUI project (code here if you still want to download it), bad news is that it's not maintained any more.

The good news is that it has been added to the official AngularJS repo (unstable branch) and soon will be available in the stable one.

<div ng-if="something"> Foo bar </div>

Will not just hide the DIV element, but remove it from DOM as well (when something is falsy).

Answer 2

I do not think there is if statement available. For your styling purpose, ng-class can be used.

<p ng-class="{important: feature.importance == 10 }">

ng-switch is also convenient.

-- update --

take a look at: https://stackoverflow.com/a/18021855/1238847

angular1.2.0RC seems to have ng-if support.

Answer 3

ng-class is probably the best answer to your issue, but AngularUI has an "if" directive:

http://angular-ui.github.com/

search for: Remove elements from the DOM completely instead of just hiding it.

I used "ui-if" to decide if I should render a data value as a label or an input, relative to the current month:

<tbody id="allocationTableBody">
    <tr ng-repeat="a in data.allocations">
        <td>{{a.monthAbrv}}</td>
        <td ui-if="$index < currentMonth">{{a.amounts[0]}}</td>
    </tr>
</tbody>

Answer 4

What also works is:

<span>{{ varWithValue || 'If empty use this string' }}</span> 

Answer 5

Actually there is a ternary operator in Angular 1.2.0.

<p style="{{feature.importance == 10 ? 'color:red' : ''}}">{{feature.description}}</p>

Answer 6

You can also try this line of code below

<div class="{{is_foo && foo.bar}}">

which shows foo.bar if is_foo is true.