Is there any way to write logic inline in a template in AngularJS.
What I want to do is something like this:
<div ng-repeat="item in items">
{{item.isValid ? 'Valid item' : 'Invalid Item'}}
</div>
Add a comment
|
3 Answers
You can use && and ||, which will end up working just like the ternary operators.
{{item.isValid && 'Valid' || 'Invalid' }}
EDIT: Angular introduced ternary operators in 1.1.5:
{{item.isValid ? 'Valid' : 'Invalid' }}
6 Comments
Seb Nilsson
Beautiful! Exactly what I was looking for. They mention in the documentation that there can be "expressions" inside the curly-braces and now I understand better how to use them. Thanks.
BradGreens
Angular introduced ternarys in 1.1.5. See here - stackoverflow.com/questions/12008580/…
kapace
Just wondering, is there any potential problems using an unescaped '&' in HTML? Might the browser produce validation errors before angular renders the templates?
Eric
@kapace , did you find an answer to your comment?
kapace
@Eric, No, I have just ignored this issue, but it gets highlighted by my editor as a problem.
|
You can insert a span with ng-show to show your conditional text
Example
<div ng-repeat="item in items">
<span ng-show="item.isValid">
Valid item
</span>
<span ng-show="!item.isValid">
Invalid item
</span>
</div>
answered Mar 14, 2013 at 12:17
I_Debug_Everything
3,8465 gold badges39 silver badges49 bronze badges
1 Comment
Seb Nilsson
That's exactly the bloated solution I was afraid of... :(
You can't use conditionals in angular expressions. And, if your div content is light (just text), you might want to use ng-bind (it also saves you from having additional span element):
<div ng-repeat="item in items" ng-bind="{true: 'Valid item', false: 'Invalid item'}[item.isValid]"></div>
