Блог

Мне нужно сгенерировать рейтинги. Рейтинг — это целочисленное значение от 0 до 15. Рейтинг имеет уровни. (5 звезд: бронзовая, серебряная, золотая)

Итак, мне нужен такой html

 <span class="tb-ratings CLASS" ng-bind-html-unsafe="stars">
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    ...
</span>
  

У меня была директива add

Теперь у меня проблемы:

• количество тегов «i» не обновляется при изменении рейтинга с помощью ввода (без добавления, без удаления) — смотрите пример на http://jsfiddle.net/AdKd8/1 /
• нужен необработанный html, без unsafe (ng-bind-html-unsafe в примере не работает)

Код приложения: http://jsfiddle.net/AdKd8/1 /

HTML: рейтинг:

 <br>need simular result:
e.g 1
<span class="tb-ratings cap" ng-bind-html-unsafe="stars">
    <i></i><i></i><i></i><i></i>
</span>
  

CSS:

 i{
    background-color: #f093f0;
    height: 10px;
    width: 10px;
    margin: 5px;
    display:block;
}

.cap i{
    background-color: red;
}

.crown i{
    background-color: green;
}

.blue i{
    background-color: blue;
}
  

JS:
функция RateCtrl($scope) {
$scope.rating = 14;
}

 angular.module('myapp', []).
  directive('myrating', function() {
        var directive = { restrict: 'E', replace: true, scope: { rating: '=' } };
      directive.template = "<h1><span class='tb-ratings {{class_value}}' ng-bind-html-unsafe='stars'></span>{{stars}}</h1>";

        directive.link = function(scope, element, attributes) {
           function gen_html(rating_value){
                if(!rating_value){
                  return
                }

                scope.class_value = "";
                var stars_count = 0;
                var step = 5
                var class_arr = ["blue", "cap", "crown"];

                for(var i=0; i<3; i  ){
                    if(rating_value > step){
                        scope.class_value = class_arr[i];
                        stars_count = rating_value - step;
                    }
                    step =5;
                }

                scope.stars = "";
                for(var i=0;i<stars_count;i  ){
                    scope.stars ="<i></i>";
                }
            }
            gen_html(scope.rating);
        }

        return directive;
  })
  

Пример:
http://jsfiddle.net/AdKd8/1 /

Это то, что вы должны сделать, чтобы заставить это работать:

• Включите angular-sanitize в свой проект
• Объявите ngSanitize в вашем модуле
• Используйте ng-bind-html вместо ng-bind-html-unsafe (устарел, как сказал пшно)
• Удалите {{звездочки}} из вашего шаблона

• Добавьте часы, чтобы звездочки обновлялись при изменении значения во входных данных

   scope.$watch('rating', function(newValue, oldValue){
      gen_html(newValue);});            
  }
    

Вот [рабочий пример] (http://jsfiddle.net/27sb5/1 /)