AngularJS conditionals in HTML Attribute

Question

How would you change an html attribute based on the model?

I'm trying to change an input's placeholder text based on a length of an array:

<input placeholder="{{todos.length ? 'Insert todo' : 'Insert your first todo'}}" />

But that doesn't seem to work...

JS Bin code example.

Answer 1

The ternary operator doesn't seem to work in this case, instead of doing this

{{cond ? true : false}}

Change it to

{{ exp && true || false }}

So your placeholder attribute would look like this (I have shortened it for demonstration purposes)

placeholder="{{todos.length > 0 && 'Insert' || 'Insert first'}}"