Toddsden Toddsden - 18 days ago 5
AngularJS Question

Dynamically Turn Off and On URL formatting

In AngularJS you can dynamically add class formatting to elements using the

ng-class
attribute. I want to dynamically change whether some text is displayed as plain text or link a hyperlink.

I am also using bootstrap but
<a>
isn't defined as a class like h1 - h5 are.

For example, for
<h1>
I can just do this in AngularJS:

<div ng-class="'h1'">This will be displayed as a heading 1.</div>


But this didn't work to display as a url:

<div ng-class="'a'">This will be displayed as text, but I want it to be a URL.</div>

Answer

EDITED If you really need it to be a div you can use:

<!--myController: angular controller on this partial view-->
<!--isURL: indicate whether this text is a URL or not-->

<div ng-class="{myController.isURL: 'btn btn-link'}">{{myController.text}}</div>

or if you can put an a or a button you can use:

<a ng-class="{myController.isURL: 'btn btn-link'}">{{myController.text}}</a>

or

<button ng-class="{myController.isURL: 'btn btn-link'}">{{myController.text}}</button>

All of them will be displayed as a URL if the myController.isURL expression is true when it's evaluated in by angular and as plain text if not. It basically, puts the classes btn and btn-link if the expression is true.