Вызов функции инициализации внутри ng-repeat

0

Я пытаюсь вызвать функцию 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>

Для функции orderComment внутри ng-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;
                };

Внедрение HTML в starsDiv по значению comment.stars. Например, если комментарий равен 4, будет 4 элемента HTML:

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

внутри него.

  • 0
    В чем проблема? У меня отлично работает: jsfiddle.net/330kedvq
  • 0
    Я внедряю HTML в жару.
Показать ещё 7 комментариев
Теги:
angularjs-ng-repeat
angularjs-ng-init

1 ответ

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

Поделиться
  • 0
    Все ваши решения работают отлично, я думаю, что пользовательская директива - верный способ сделать это.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню