CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
Shashishekhar Hasabnis
Shashishekhar Hasabnis

Reputation: 1756

passing href link through angularjs ng-repeat

I have an array of messages

$scope.messsages = []

Upon clicking a button the content of a text area gets added into the array using ng-click method.This message is used to query the api. After which we get a response from the server which too is added into the array $scope.messages. All these messages are shown in html using ng-repeat i.e:-

<div ng-repeat="msg in messages track by $index">
  {{ msg }}
</div>

However if I get a response from the server as a hyperlink string like

To know more <a href="URL">click here</a>.

The message that gets displayed in ng-repeat is a plain string with no hyperlinks. It renders the <a href="URL"> part as a string itself. I would like to represent it in html format.

One way it worked was by using 

document.getElementById("demo").innerHTML = $scope.messages;

But I would like to know is there any angular way to do so in the ng-repeat part itself.

Thanks in advance

Upvotes: 0

Views: 829

Answers (3)

Hadi
Hadi

Reputation: 17289

You should use ng-bind-html for this. so you should inject ngSanitize in your app.

$scope.html = '<a href="#/Test">test</a>';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);


angular.module('myapp', ['ngSanitize'])
.controller('main', function($scope,$sce) {
   $scope.messages = [{"link":"<a href='#/abc'>abc</a>"}];

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.min.js"></script>

<div ng-app="myapp" ng-controller="main">    
  <div ng-repeat="msg in messages">
      <div ng-bind-html="msg.link"></div>
  </div>
</div>

Upvotes: 0

Sardesh Sharma
Sardesh Sharma

Reputation: 1759

Try to use like this

<div ng-repeat="msg in messages track by $index">
    <div ng-bind-html="msg"></div>
</div>

Here is the plunk example for it.

Upvotes: 1

Amadou Beye
Amadou Beye

Reputation: 2808

Include ngSanitize module on your app and then change your view as below

<div ng-repeat="msg in messages track by $index">
    <div ng-bind-html="msg"></div>
</div>

Upvotes: 1

Related Questions