Struggling with a JavaScript issue (not angular related, but within an Angular context) for hours without any success.
I've condensed the content into shorter paragraphs and reassigned the subcontent back to the array's content property, but the larger content still appears.
controller: function($scope, $location) {
this.$scope = $scope;
this.$scope.folio = {
"deleted" : null,
"free" : null,
"id" : null,
"lastModified" : null,
"productId" : null,
"publication" : null,
articles: []
};
},
result: function(folio) {
this.$scope.folio.articles.length = 0;
this.$scope.folio.deleted = folio.deleted
this.$scope.folio.free = folio.free
this.$scope.folio.id = folio.id
this.$scope.folio.lastModified = folio.lastModified
this.$scope.folio.productId = folio.productId
this.$scope.folio.publication = folio.publication
for(var i=0; i<folio.articles.length; i++) {
for(var j=0; j<folio.articles[i].pages.length; j++) {
var content = folio.articles[i].pages[j].content
var index = content.toLowerCase().indexOf("test".toLowerCase())
if(index > 150) { //if index is not within first 150 characters
content = content.substring(index - 25, index + 30)
}
//displays fine with the desired output
console.log(content.replace(new RegExp("test", "gi"), "<em>" + "test" + "</em>"))
//assigning back to the array but for some reason it's not the trimmed output at the end
folio.articles[i].pages[j].content = content.replace(new RegExp("test", "gi"), "<em>" + "test" + "</em>")
}
//the article's pages are still full length
this.$scope.folio.articles.push(folio.articles[i]);
}
this.$scope.$apply();
}