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

时间:2015-11-02 15:52:00

标签: javascript angularjs angularjs-ng-repeat angularjs-ng-init

我想在ng-init内调用ng-repeat函数,它只适用于第一个元素:

<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>

orderCommentng-repeat函数需要初始化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;
                };

starsDiv的值向comment.stars注入HTML。 例如,如果注释等于4,则将有4个HTML元素:

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

1 个答案:

答案 0 :(得分: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。您只需要一个函数,它将获取一个数字并返回该大小的数组。您可以像这样使用数组。

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

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