in my code I had an angular ng-repeat displaying an json object. one of the fields inside this object is an array and when I display it using angular syntax {{item.tags}} it comes up as raw json text as expected. But whenever I tried to parse this, or replace the text it is failing to do so. almost like it is ignoring the actual html and it only sees the angular syntax. I am probably doing something wrong
But this is my code
<div class="col-md-2">
<div id="top-ten-list" class="list-group" ng-controller="ToptenController as topten">
<div data-toggle="collapse" data-target="#collapseTopTen" class="list-group-item active" onclick="accordianToggle(this)" >
<h3 class="inline-header">Top Ten Games<span class="pull-right"><i id="links-caret" class="fa fa-caret-up"></i></span></h3>
</div>
<div id="collapseTopTen" class="panel-collapse collapse in" >
<span ng-repeat="item in topten.gameList | limitTo:10 | reverse" bs-popover/><button type="button" bs-popover rel="popover" data-trigger="focus" data-original-title="{{item.title}}" class="list-group-item" data-content="{{item.tags}}" >
{{item.title}}
</button>
</div>
</div>
</div>
var app = angular.module('main',[]);
//reverse JSON order.
app.filter('reverse', function() {
return function(items) {
return items.slice().reverse();
};
});
app.directive('bsPopover', function() {
return function(scope, element, attrs) {
element.find("[rel=popover]").popover({ placement: 'bottom', html: 'true'});
};
});
app.controller('ToptenController',function(){
this.gameList = topten;
this.writeout=function(item){
console.log(item);
};
this.printTags = function(item){
for ( i = 0; i < 1; i++)
console.log(item[i]);
};
});
and my code is returning the image below
Ultimately I would like it to be replaced by platformerhack
this is the json I am using as reference.
[{
"title": "Super Mario Unlimited",
"description": "text desc here ",
"image": "image href here",
"image2": "",
"youtube": "http://youtu.be/O8y-CTSwMr8",
"developer": "",
"tags": [{
"tag": "platformer"
},{
"tag": "hack"
}]
}]