Zabs Zabs - 5 months ago 34
AngularJS Question

Change text depending on the size of the array in AngularJS

I have the following scope and if this is greater than 5, I'd like to display something like 'more than ten items' otherwise it will just list the items in a human readable list

<span class="bold-words">{{rule.words.join(', ')}}</span>

What is the correct AngularJS way to do this?

e.g so it would show like below

// less than 5
Your list is "peas, fruit, tea"
// more than 5
Your list is greater than 5 items


You can do it easily with ternary operator

<span class="bold-words">Your list is {{ rule.words.length > 5 ? 'greater than 5 items' : rule.words.join(', ') }}</span>