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，否则浏览器不会更新属性。

<强>更新

这个东西只有当url存在或空时才会起作用，如提供的示例所示。它不会检查值网址或文本。请参阅下面的答案进行检查。

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>

如果值包含文本，AngularJS将显示url或纯文本

2 个答案: