How to show some text in html when certain condition is met in AngularJS?

Question

I want to show some text in html only when certain condition inside an input box is met. Otherwise, hide it. I am using AngularJS. Below is my html code.

  <form novalidate="" class="simple-form">conditional_number 
  <input type="text" ng-model="conditional_number " ng-change="search_number()"/>

If the conditional_number in the input box exceeds 5, I want the text Text to appear if condition is met to be displayed.

In AngularJS, there are ng-switch, ng-hide / ng-show, ng-if and perhaps more. I am at a loss which is the most appropriate. How can this be appropriately done in AngularJS?

@NidhishKrishnan: Thanks. The working example was very helpful! — guagay_wk
– guagay_wk, Commented May 8, 2014 at 9:43
@NidhishKrishnan: 2 more minutes before I can mark it as answer. Will do it as soon as I can. — guagay_wk
– guagay_wk, Commented May 8, 2014 at 9:47

Nidhish Krishnan · Accepted Answer · 2014-05-08 09:45:43Z

1

you can simply achieve it using ng-show

Take a look at this

Working Example

 <form novalidate="" class="simple-form">
  <input name="myfield" ng-model="conditional_number" ng-minlength="5" ng-change="search_number()>
    <span ng-show="conditional_number.length>5">Good boy!</span>
</form>

edited May 8, 2014 at 9:45

answered May 8, 2014 at 9:39

Nidhish Krishnan

20.8k6 gold badges67 silver badges78 bronze badges

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

2 Comments

Nidhish Krishnan Over a year ago

@RobH user3293156 has mentioned that he want text to be print when input text box length size exceeds 5. Its working fine

RobH Over a year ago

Oh I see. I thought "If the conditional_number in the input box exceeds 5" meant literally the number 5, not a 5 digit number.

RobH · Accepted Answer · 2014-05-08 09:46:50Z

1

I think ng-show is the most appropriate here:

<form novalidate="" class="simple-form">
  conditional_number 
  <input type="text" ng-model="conditional_number" ng-change="search_number()"/>
  <span ng-show="conditional_number> 5">Text to appear if condition is met</span>

This clearly communicates your intention to only show when the conditional number is greater than 5.

Here's a Plunker for you.

edited May 8, 2014 at 9:46

answered May 8, 2014 at 9:39

RobH

3,6101 gold badge25 silver badges48 bronze badges

1 Comment

guagay_wk Over a year ago

Thanks. That was very helpful too. I have upvoted but I can only choose one answer.

Collectives™ on Stack Overflow

How to show some text in html when certain condition is met in AngularJS?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related