How to toggle visibility in AngularJS based on the text content of the element?

Question

Imagine I have the following HTML:

<p id="message" ng-show="something"></p>

Now during the lifetime of the page #message can be filled up with some text message after an AJAX call.

I would like #messageto toggle itself visible/hidden based on if it contains something or not.

Something like:

<p id="message" ng-show="self.text != ''"></p> <!--Not working but you get the idea -->

Instead of jQuery, can you populate the content of the paragraph with an AJAX call from an angular service? If so, you can define the result of the call as $scope.content and use the logic in Feussy's suggestion below. — LexJacobs
– LexJacobs, Commented Jun 19, 2014 at 19:16
Yeah I'm not using jQuery... I used "neutral" likd JS as pseudo-code in my example. — AlexV
– AlexV, Commented Jun 19, 2014 at 19:50

Feussy · Accepted Answer · 2014-06-19 19:03:38Z

2

My best suggestion would be to bind the content of #message to a scope variable.

<p id="message" ng-show="Content != ''">{{Content}}</p>

Then you simply need to update the value of $scope.Content to change both the contents of #message and its visibility.

answered Jun 19, 2014 at 19:03

Feussy

3841 silver badge4 bronze badges

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

Comments

davidmdem · Accepted Answer · 2014-06-19 19:56:28Z

1

Feussy is correct in that binding the #message element's content to a scope variable is the correct way to do this.

If for some reason you can't or don't want to bind the content to a variable in your Controller, you can bind the content directly on the element which will get you closer to the syntax that you are looking for.

<p id="message" ng-bind="self.text" ng-show="self.text !== ''"></p>

Here is a working example.

answered Jun 19, 2014 at 19:56

davidmdem

3,8232 gold badges33 silver badges34 bronze badges

1 Comment

AlexV Over a year ago

Thanks for the working example. My true problem was a $scope issue. I'm new to AngularJS and I put the <p> outside the element with ng-controller so it was out of scope...

Collectives™ on Stack Overflow

How to toggle visibility in AngularJS based on the text content of the element?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related