AngularJS показать url или обычный текст, если значение содержит текст

Question

Как я могу показать в AngularJS и url или обычный текст, если переменная содержит текст?

Например, давайте есть модель

$scope.model = { 
    Url: ''  
}; 


<div data-ng-controller="myController"> 
    if (model.Url) 
    { 
    <a href="{{model.Url}}">URL</a> 
    } 
    else 
    { 
    <p>{{model.Url}}</p> 
    } 

<div> 

P.S. Условие if else предназначено для демонстрационной цели, поэтому как я могу принять это, используя директиву, например, data-ng-if?

Answer 1

Вы можете попробовать что-то вроде этого:

<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> 

Примечание: следует использовать ng-href вместо href иначе браузер не обновляет атрибут.

Update

Эта вещь работает только если URL присутствует или пусто, как в указанном примере. Он не проверяет значение url или text. См. Ответ ниже этих проверок.

Answer 2

Создать функцию, чтобы проверить, если блок текста является URL или не

$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>