AngularJS show url or plain text if value contain text - angularjs

Question

How can I show in AngularJS and url or a plain text if a variable contains text?
For example let's have the model
$scope.model = {
Url: ''
};
<div data-ng-controller="myController">
if (model.Url)
{
URL
}
else
{
<p>{{model.Url}}</p>
}
<div>
P.S. The if else condition is for demo purpose, so how can I acheieve that using a directive like data-ng-if ?

Answer 1

You can try something like this:
<div data-ng-controller="myController">
<a ng-if="model.Url" ng-href="{{model.Url}}">URL</a>
<p ng-if="!model.Url">{{model.Url}}</p>
<div>
Note: you should use ng-href instead of href otherwise browser doesn't update attribute.
Update
This thing works only if url present or empty as in provided example. It doesn't check is value url or text. See answer below that checks.

Answer 2

Create a function to test if a block of text is a URL or not
$scope.isURL = function(text){
var expression = /[-a-zA-Z0-9#:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9#:%_\+.~#?&//=]*)?/gi;
// alternative
// var expression = new RegExp("^(http[s]?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|www\\.){1}([0-9A-Za-z-\\.#:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?");
var regex = new RegExp(expression);
/// for example text could be: text = 'www.google.com';
if (text.match(regex) ){
return true;
} else {
return false;
}
}
HTML:
<div data-ng-controller="myController">
<div ng-init="model.url = 'some text'"></div>
<div ng-if="isURL(model.url)">
<a ng-href='model.url' > is url </a>
</div>
<div ng-if="!isURL(model.url)">
<p ng-bind='model.url' > </p>
</div>
<!-- better done as ng-switch -->
<div ng-switch on="isURL(model.url)">
<p ng-switch-when='false' ng-bind='model.url'></p>
<a ng-switch-when='true' ng-href='model.url' ng-bind='model.url'></a>
</div>
<div>