2

私はプログラミングが初めてで、これが投稿しなければならなかった最初の質問です。

私がやろうとしてng-bind-htmlいるのは、によって作成されている div に 5 つの画像ファイルを配置するために使用することng-repeatです。これら 5 つのイメージ ファイルは、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>

私もこれを持っており、未定義myAppな​​どの問題はありません。sce

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

newGameingetStars(newGame)をスコープの下で定義されたものに置き換えると、コードは機能しますnewGameが、 (一時変数 from と一致させようとしますng-repeat = "newGame in myGamesList") を使用すると、何も表示されません。

newGame反復される各要素として認識されるようにするにはどうすればよいですか?

関数getStarsには次のコードがあります

$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;
};

その場合はお役に立ちます。明確にするために、関数への入力であるパラメーターにするnewGame必要があります。myGamesListgetStars

これがわかりにくい場合は申し訳ありませんが、すべてのベースをカバーしようとしました!

4

1 に答える 1

2

あなたの出身地はどこ$scope.htmlですか？

あなたがすべきことは、以下に示すように使用newGameすることですng-bind-html

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

そしてあなたのコントローラーで

$scope.getTrustedHtml = function(game) {
  // get the game HTML
  var html = $scope.getStars(game);
  // Return it as trusted HTML for ngBindHtml
  return $sce.trustAsHtml(html);
}
于 2015-02-19T01:18:21.567 に答える