I have a query that iterates through an array of strings called wikiContent. After displaying the first three sentences from the array, I aim to insert a hyperlink labeled More, which when clicked will reveal the remaining sentences.
This code snippet is part of an AJAX request using $http:
var opt = "<span>";
for(var j = 0; j < wikiContent.length; j++){
opt += wikiContent[j];
if(j === 2){
opt += "</span><span ng-hide='!show'>";
}
}
opt += " ... <a href=\"\" ng-click='show=!show'>More</a>";
opt += "</span>";
$rootScope.text = opt;
Clicking on More currently triggers two issues:
- The page reloads.
- The text does not toggle as expected.
How can I resolve both of these problems?
This is the corresponding HTML:
<div class="panel-body" ng-bind-html="toHtml(text)"></div>
And here is the toHtml() function being used:
$scope.toHtml = function(string){
return $sce.trustAsHtml(string);
};