0

I need to add anchor tag if the string contains "http://" in it, ex json response:

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;

but, I need to display anchor tag for the http,

I have tried using 

<div ng-repeat="post in posts">
<span ng-bind="post.content"></span>
</div>
arun
  • 145
  • 1
  • 17
  • You need write regex for this. Post. content is a string. Not Url. – Ved May 02 '17 at 12:00
  • @Ved, Will you please share an sample code, I have tried my best. but nothing works – arun May 02 '17 at 12:07
  • Possible duplicate of [Detect URLs in text with JavaScript](http://stackoverflow.com/questions/1500260/detect-urls-in-text-with-javascript) – Hadi J May 02 '17 at 12:10

1 Answers1

0

What you can do is add html tag inside as a string and use ng-bind-html to cmpile the string to dom element 

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

in the html 

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

Finally add this function

 $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>
Sachila Ranawaka
  • 39,756
  • 7
  • 56
  • 80
  • I need the anchor tag for the below response `var res = {status: "ok",activities: [{content: "The icon Canadian. Credit: http://allrecipes.co..."},{content: "The test message"},{content: "The Canadian art http://allrecipes.co"}]}` – arun May 02 '17 at 13:56