在 ng-repeat 中调用初始化函数

Question

我正在尝试在 ng-repeat 中调用 ng-init 函数，但它仅适用于第一个元素：

<li ng-repeat="comment in ad.comments|limitTo:quantity | orderBy : sortComment : true">
        <div id="starsDiv" ng-init="orderComment(comment.stars)"></div>
          Comment: {{comment.text}}
          <cite class="clearfix">  on {{comment.posted | date}}</cite>
</li>

ng-repeat 函数中的 orderComment 需要初始化 starDiv:

$scope.orderComment= function(numOfStars){
                   var html = '<i class="fa fa-star-o" style="color:gold;"></i>';
                    for(var i =0 ; i<numOfStars-1;i++)
                    {
                        html += '<i class="fa fa-star-o" style="color:gold;"></i>';
                    }
                    document.getElementById("starsDiv").innerHTML = html;
                };

通过 comment.stars 的值将 HTML 注入到 starsDiv。例如，如果 comment 等于 4，则 :

的 4 HTML 个元素

'<i class="fa fa-star-o" style="color:gold;"></i>'

里面。

Answer 1

一般来说，Angular 不鼓励您自己对 DOM 进行更改，在这种情况下没有必要。

一个简单的解决方案可能是放入尽可能多的星星，并使用 ng-show 仅显示我们需要的数量。假设有 5 颗星：

<i class="fa fa-star-o" style="color:gold;" ng-show="comment.stars > 0"></i>
<i class="fa fa-star-o" style="color:gold;" ng-show="comment.stars > 1"></i>
<i class="fa fa-star-o" style="color:gold;" ng-show="comment.stars > 2"></i>
<i class="fa fa-star-o" style="color:gold;" ng-show="comment.stars > 3"></i>
<i class="fa fa-star-o" style="color:gold;" ng-show="comment.stars > 4"></i>

如果您需要通用解决方案，您可以随时使用 ng-repeat。您只需要一个函数，该函数将接受一个数字和 return 一个该大小的数组。您可以像这样使用数组。

<i class="fa fa-star-o" style="color:gold;" ng-repeat="x in array(comment.stars)"></i>

一个更通用的解决方案是创建一个自定义指令来呈现这些星星。我建议阅读自定义指令：https://docs.angularjs.org/guide/directive

在 ng-repeat 中调用初始化函数

Calling initialization function inside ng-repeat

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-init