Is it possible to set a default value in an AngularJS expression?

Question

I have an AngularJS expression enwrapped in a <a> tag. The expression is evaluating an allow variable.

<a href="#" >{{allow}}</a>

In case allow is null or undefined Angular shows nothing. Instead I would like to display a default string.

To give you a better understanding, this is what I'm trying to achieve.

enter image description here

The modal on the right is generated from the form on the left. If the user didn't enter any text for "Allow Button Text" and "Disallow Button Text" I want to display ALLOW and DON'T ALLOW respectively.

Here is my code:

<div id="test2" class="row"  ng-app="">    
  <label for="title">Title</label>
  <input type="text" name="title" ng-model="title" placeholder="https:/your website.com/wants to:">

  <label for="title">Allow Button Text</label>
  <input type="text"  ng-model="allow" placeholder="ALLOW">

  <label for="title">Disallow Button Text</label>
  <input type="text"  ng-model="disallow" placeholder="DONT ALLOW">     

  <p>{{title}}</p>
  <a href="" >{{disallow}}</a>
  <a href="" >{{allow}}</a>

What do you mean by "placeholder" in this context? Show an example of what you mean. — Jim Garrison
– Jim Garrison, Commented Feb 18, 2016 at 7:33

dfsq · Accepted Answer · 2016-02-18 10:37:17Z

13

If by placeholder you mean default value until allow is specified, then it's quite easy:

<a href="#">{{ allow || 'Click me' }}</a>

edited Feb 18, 2016 at 10:37

answered Feb 18, 2016 at 7:33

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gio Polvara Over a year ago

Shouldn't it be {{allow || 'Click me'}}? The single pipe | introduces a filter in Angular.

Sagar Sinha Over a year ago

thnks @Gpx, this is what i want to do.

ashfaq.p · Accepted Answer · 2016-02-18 07:33:55Z

0

Sorry my friend, But placeholder attribute is not for anchor tag. It is for input fields.

let us know what you exactly want to achieve with this and we can suggest some alternative approach.

As suggested by @dfsq, if you mean placeholder text as the text to show when allow is not defined then you can put default text like this:

{{allow | 'placeholder text'}}

answered Feb 18, 2016 at 7:33

ashfaq.p

5,49723 silver badges36 bronze badges

Collectives™ on Stack Overflow

Is it possible to set a default value in an AngularJS expression?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related