Question

我需要产生评分。评级为整数值beetwen 0 - 15。评级有水平。（5星：青铜，银，金）

所以我需要这样的HTML

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

我添加了指令

现在我遇到了问题：

“i”标签计数未通过输入更新评级更改（无添加，无删除） - 请参阅http://jsfiddle.net/AdKd8/1/上的示例
需要原始html，没有不安全（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： function 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/

Answer 1

这是你应该做的工作：

在项目中加入angular-sanitize
在您的模块中声明ngSanitize
使用ng-bind-html代替ng-bind-html-unsafe（不推荐使用przno说）
从模板中删除{{stars}}

添加手表，以便在更改输入值

时更新星标

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

这是[工作示例]（http://jsfiddle.net/27sb5/1/）

刷新html以指示对象模型更改

1 个答案: