CODEWITHSUNDEEP
angularjs
Samantha J T Star
Samantha J T Star

Reputation: 32828

How can I set the title of a HTML element based on a complex expression using AngularJS?

I know about the {{ }} but how can I set the title of an element based on the value of three different variables:

I am wanting a message saying:

"Required field" if !forms.register.userName.$dirty && forms.register.submitted

"Already taken" if forms.register.userName.$dirty && forms.register.userName.$error.uniqueName

Can I put into the {{ }} something like an if else or a switch or is there some other way of doing this?

Upvotes: 0

Views: 39

Answers (2)

Bungle
Bungle

Reputation: 19712

It looks like you're trying to set up form validation. Here's an excellent tutorial that may have what you're looking for:

https://scotch.io/tutorials/angularjs-form-validation#showing-an-error-message-ng-show

In your case, the messages would look something like this:

<p ng-show="!forms.register.userName.$dirty && forms.register.submitted" class="help-block">Required field</p>
<p ng-show="forms.register.userName.$dirty && forms.register.userName.$error.uniqueName" class="help-block">Already taken</p>

If you're trying to actually set the title attribute of an HTML element based on these expressions, let me know and I can update the answer. An example of the static HTML that you're looking to generate would also be helpful.

Upvotes: 2

Walter Brand
Walter Brand

Reputation: 689

You could do something like:

<span ng-if="!forms.register.userName.$dirty && forms.register.submitted">{{variable}}</span>
<span ng-if="forms.register.userName.$dirty && forms.register.userName.$error.uniqueName">{{variable}}</span>

Upvotes: 1

Related Questions