html - 使用angularjs检查字符串是否包含http url

Question

如果字符串中包含“http://”，我需要添加 anchor 标记，前 json 响应:

var res =  {status: "ok",activities: [{content: "The icon Canadian. Credit: http://allrecipes.co..."},{content: "The test message"},{content: "The Canadian art http://allrecipes.co"}]}
$scope.posts = res.activities;

但是，我需要为 http 显示 anchor 标记，

我试过用

<div ng-repeat="post in posts">
<span ng-bind="post.content"></span>
</div>

Answer 1

你可以做的是在里面添加 html 标签作为一个字符串，然后使用 ng-bind-html 将字符串编译成 dom 元素

{content: "The icon Canadian. Credit: <a href='http://allrecipes.co...'> http://allrecipes.co... </a>"}

在html中

 <span ng-bind-html="trust(post.content)"></span>

最后添加这个函数

 $scope.trust = function(item){
      return $sce.trustAsHtml(item)
 }

angular.module("app",[])
.controller("ctrl",function($scope,$sce){

var res =  {status: "ok",activities: [{content: "The icon Canadian. Credit: <a href='http://allrecipes.co...'> http://allrecipes.co... </a>"},{content: "The test message"},{content: "The Canadian art <a href='http://allrecipes.co'> http://allrecipes.co </a>"}]}
$scope.posts = res.activities;

$scope.trust = function(item){
  return $sce.trustAsHtml(item)
}
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <div ng-repeat="post in posts">
<span ng-bind-html="trust(post.content)"></span>
</div>
</div>