If statement within custom placeholder directive in Angular.js

Question

I have a question.

I want to add a placeholder when the template is in edit mode. When in edit mode, the variable viewer.building is true, otherwise false. You can see in the code I'm showing here what I'm trying to do. I need an if-statement within my sk-placeholder directive attribute. If viewer.building is true, there's text. Otherwise there is an empty placeholder attribute.

<div contentEditable="[[viewer.building]]" ng-model="viewer.course.description" 
sk-placeholder="[[viewer.building]] ? 'Summarise the content of your course by 
writing a short blurb. You can add a more elaborate description on the next 
page.'"></div>

Unfortunately the if statement is just showing up as text. Any ideas? I can't just hide the whole div when viewer.building is false using ng-show because the div is being filled up with a bunch of text in normal display mode.

Thanks in advance!

(PS : I'm using angular in twig templates, that's why I'm using square brackets instead of curly ones so they don't cause conflicts)

Answer 1

Try using a conditional expression in the following format:

attribute="condition && if-true || if-false"

In your case it should look something like this:

<div contentEditable="[[viewer.building]]" ng-model="viewer.course.description" 
sk-placeholder="[[viewer.building && 'Summarise the content of your course by 
writing a short blurb. You can add a more elaborate description on the next 
page.' || '']]"></div>