ng-bind-html using a function not recognizing temporary variable form ng-repeat

Question

I'm new to programming and this is my first question I've had to post.

What I'm trying to do is use ng-bind-html to place five image files into the div that is being created by ng-repeat. These five image files will differ between each element from the ng-repeat.

<div ng-repeat = "newGame in myGamesList">
            <div class="col-sm-4 col-lg-4 col-md-4">
                <div class="thumbnail">
                    <div>
                        <img src="{{newGame.thumbnail}}" alt="">
                    </div>
                    <div class="caption">
                        <h4 class="pull-right">{{newGame.price}}</h4>
                        <h4><a ng-style="{'font-size': nameSize((newGame.name | removeSubName).length)}" class="categoryGameName" href="#details/{{myGamesList.indexOf(newGame)}}">{{newGame.name | removeSubName}}</a>
                        </h4>
                        <p>{{newGame.description}}</p>
                    </div>
                    <div id="ratingDiv" style="margin-left: 8px; margin-right: 8px; margin-bottom: 5px;">
                        <div style="display: inline-block" ng-bind-html="trustedHtml"></div>
                        <p class="pull-right" style="color: #d17581">{{newGame.numberReviews}} reviews</p>
                    </div>
                </div>
            </div>
        </div>

I also have this in myApp, and no problems with sce being undefined etc.

$scope.html = getStars(newGame);
$scope.trustedHtml = $sce.trustAsHtml($scope.html);

If I replace the newGame in getStars(newGame) with something defined under the scope the code works, however using newGame (trying to match with the temporary variable from ng-repeat = "newGame in myGamesList"), nothing appears.

How can I make it so newGame is recognized as each element that is being iterated upon?

The function getStars has the following code

$scope.getStars = function(game) {
    var numStars = (game.numberStars);
    iconString = '';
    for (i=0; i<Math.floor(numStars); i++) {
        iconString += '<img style="width:16px" class="starGlyph" src="images/fullStar.png" alt=""/>'
    }
    if (numStars%1 == 0.5) {
        iconString += '<img style="width:16px" class="starGlyph" src="images/halfStar.png" alt=""/>'
    }
    for (j=0; j<(5-Math.ceil(numStars)); j++) {
        iconString += '<img style="width:16px" class="starGlyph" src="images/emptyStar.png" alt=""/>'
    }
    return iconString;
};

In case that is helpful. To clarify, I need each newGame in myGamesList to be the parameter that is input to the getStars function.

Sorry if this is hard to follow, but I tried to cover all my bases!

floribon · Accepted Answer · 2015-02-20 00:57:29Z

2

Where does your $scope.html comes from?

What you should do is use newGame in your ng-bind-html as shown below

<div style="display: inline-block" ng-bind-html="getTrustedHtml(newGame)"></div>

And in your controller

$scope.getTrustedHtml = function(game) {
  // get the game HTML
  var html = $scope.getStars(game);
  // Return it as trusted HTML for ngBindHtml
  return $sce.trustAsHtml(html);
}

edited Feb 20, 2015 at 0:57

answered Feb 19, 2015 at 1:18

floribon

19.2k5 gold badges56 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Moonshoes Over a year ago

I'm not completely sure what you mean when you say "Where does your $scope.html comes from?". It's being declared under the scope of the "myApp" controller, if that helps. I tried what you stated and it doesn't work (nothing shows up). I also replaced var html = $scope.getStars(game.html); with var html = $scope.getStars(game); and that didn't work either. (The function getStars returns a string of 5 image tags, which is the html I want to bind with ng-bind-html into my div.)

floribon Over a year ago

I meant that in your code you are binding $scope.html but this never changes so that would be the same in every ng-repeated element (I am not clear either what is myApp and how you have access to newGame in it). You are right, it should be $scope.getStars(game), I have fixed my answer. Can you console.log what the line var html = ... returns? If this is correct, that should work.

Moonshoes Over a year ago

It works! I honestly have no idea why it didn't work earlier when I tried what you edited your answer to, but it does now! It may have been a cache problem, because your exact answer solves it. Thank you very much!

floribon Over a year ago

Great! Don't forget to upvote the answer so it can help other people facing the same issue :) thanks

Moonshoes Over a year ago

I tried to upvote it but I need 15 reputation first, once I get that I'll be sure to come back and upvote it

Collectives™ on Stack Overflow

ng-bind-html using a function not recognizing temporary variable form ng-repeat

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related