19

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.

Improve this question
3
  • can you explain better what is not working and what response you get? Commented Dec 8, 2012 at 19:05
  • Shouldn't it be something like: <input placeholder="{{todos.length>N ? 'Insert todo' : 'Insert your first todo'}}" /> Commented Dec 8, 2012 at 19:11
  • Hey guys, check out this jsbin, what am I doing wrong? If I remove the input placeholder code, the list populates... jsbin.com/evohip/1 thanks. Commented Dec 8, 2012 at 21:04

2 Answers 2

Reset to default
26

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'}}"
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

jm- thanks that works... so Angular Expression doesn't support the ternary shorthand?
it seems it doesn't and it makes sense since the framework is very oriented towards testability and you don't want logic in your views. So ideally you would just call a function defined in your controller that returns a string.
oic so something like getInputPlaceholder() and have my logic in there?
I think in this case you can get away with it, since it's a placeholder. Perhaps just have a isEmpty() in your controller which you can test easily and use it for more use cases, then leave the message to display in the views.
Awesome solution. This worked for me in a case where I should dynamically change the value of a directive custom attribute inserted in a field inside a ng-repeat loop. Thank you a lot.
|
10

For anyone else who comes across this (like I just did via Google), it looks like Angular recently added support for the ternary operator in expressions. I just used it successfully in 1.2.16 to dynamically update a tooltip (title) attribute. It seems to have first appeared in the documentation for 1.2.17, although they still generally discourage its use:

From: AngularJS: Developer Guide: Expressions

Apart from the ternary operator (a ? b : c), you cannot write a control flow statement in an expression. The reason behind this is core to the Angular philosophy that application logic should be in controllers, not the views. If you need a real conditional, loop, or to throw from a view expression, delegate to a JavaScript method instead.

Improve this answer

2 Comments

I needed this in a template for a directive I was building. Probably should have put everything in a .link() instead of the template, but the template (at the moment) feels so much simpler. Problem: I needed to optionally include a random attribute "data-toggle" and couldn't figure out how. Ternary operator worked like a charm: <a data-toggle="(disabled?'':'drop down')">
Whoops, meant to write: <a data-toggle="{{(disabled?'':'drop down')}}">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.