Angularjs 如何根据响应动态显示星级？

我需要根据响应动态显示星级

我可以显示从1到5的值，但如果评级为0，则不会显示空星

如果评级=0.4，则显示1颗星填充

我的控制器：

(function() {
    'use strict';


    angular
    var app = angular
        .module('app')

 app.directive('starRating', function () {

    return {
        restrict: 'A',
        template: '<ul class="rating">' +
            '<li ng-repeat="star in stars" ng-class="star" ng-click="toggle($index)">' +
            '\u2605' +
            '</li>' +
            '</ul>',
        scope: {
            ratingValue: '=',
            max: '='
        },
        link: function (scope, elem, attrs) {

            var updateStars = function () {

                scope.stars = [];
                for (var i = 0; i < scope.max; i++) {
                    if(i == 0) {
                        scope.stars = [];
                        scope.stars.push({
                        empty: i = 0
                    });
                    } else {
                    scope.stars.push({
                        filled: i < scope.ratingValue
                    });
                    }
                }

            };
            scope.$watch('ratingValue', function (oldVal, newVal) {
                if (newVal) {
                    updateStars();
                }
            });
        }
    }
});


app.controller('Controller', Controller);

    Controller.$inject = ['UserService', '$location', '$rootScope', '$scope', 'fileUpload', 'FlashService', '$cookieStore', '$timeout', '$window'];

    function Controller(UserService, $location, $rootScope, $scope, fileUpload, FlashService, $cookieStore, $timeout, $window) {

$scope.selectTestSubject = function() {

$scope.rating = 0;

    console.log(levels.length);   

        for(var k=0; k<levels.length; k++) { 
           var respRating = levels[k].rating;
//           var respRating = 1.5;

            console.log(respRating);

            $scope.ratings = [{
                current: respRating,
                max: 5
            }];

            if(respRating == 0) {

                $scope.defaultRating = true;
            } else {

                $scope.defaultRating = false;
            }
         }
     }
  }
}) ();

<div><span ng-repeat="rating in ratings">

        <div star-rating rating-value="rating.current" max="rating.max"></div>
        </span>
    </div>

（函数（）{
"严格使用",；
有棱角的
var app=角度
.module（'应用程序'）
应用指令（'starting'，函数（）{
返回{
限制：“A”，
模板：'
'+
“
”+
“\u2605”+
“
”+
“
”，
范围：{
额定值：'='，
最大值：'='
},
链接：功能（范围、要素、属性）{
var updateStars=函数（）{
scope.stars=[]；
对于（变量i=0；i对于（var k=0；k您的解决方案的一个问题是$watch表达式

scope.$watch('ratingValue', function (oldVal, newVal) {
    if (newVal) {
        updateStars();
    }
});

oldVal
和
newVal
实际上是错误的，$watch函数首先接受新值，然后是旧值。其次，条件
if（newVal）
不适用于0，因为0是一个错误的值

相反，您应该：

scope.$watch('ratingValue', function(value, previousValue) {
    // Only update the view when the value has changed.
    if (value !== previousValue) {
        updateStars();
    }
});

你的
updateStars
函数也总是重新初始化
scope.stars
变量并附加到它上面。这样做可能会产生一些不必要的副作用，并导致视图中没有反映模型值。最好初始化数组，如果它还不存在，则附加该项或更新现有值。因此我有这样的东西：

// Initialise the stars array.
scope.stars = [];

var updateStars = function() {

    for (var i = 0; i < scope.max; i++) {
        var filled = i < Math.round(scope.ratingValue);
        // Check if the item in the stars array exists and 
        // append it, otherwise update it.
        if (scope.stars[i] === undefined) {
            scope.stars.push({
                filled: filled
            });
        } else {
            scope.stars[i].filled = filled;
        }
    }

};

您的模板也没有正确使用星号上的
filled
属性，它应该包含相应的
ng类
，如下所示：

<ul class="rating">
    <li class="star" 
        ng-repeat="star in stars" 
        ng-class="{ filled: star.filled }"
        ng-click="toggle($index)">
      \u2605
    </li>
</ul>

您还可以通过收听
mouseenter
和
mouseleave
效果来改进此评级系统，以便在用户选择新值时星星显示为黄色。这是非常常见的功能。您可以通过进行一些修改来实现

首先，应更新模板以侦听以下事件：

<ul class="rating">
    <li class="star" 
        ng-repeat="star in stars" 
        ng-class="{ filled: star.filled }"
        ng-mouseenter="onMouseEnter($event, $index + 1)"
        ng-mouseleave="onMouseLeave($event)"
        ng-click="toggle($index)">
      \u2605
    </li>
</ul>

就是这样！
如果评级为0，则不会显示空星。
如果评级为0，您希望显示多少开始？对于（var i=0；i：-）

.star {
  cursor: pointer;
  color: black;
}

.star.filled {
  color: yellow;
}

<ul class="rating">
    <li class="star" 
        ng-repeat="star in stars" 
        ng-class="{ filled: star.filled }"
        ng-mouseenter="onMouseEnter($event, $index + 1)"
        ng-mouseleave="onMouseLeave($event)"
        ng-click="toggle($index)">
      \u2605
    </li>
</ul>

var updateStars = function(rating /* instead of blank */ ) {

    for (var i = 0; i < scope.max; i++) {
        var filled = i < Math.round(rating); // instead of scope.ratingValue
        // Check if the item in the stars array exists and 
        // append it, otherwise update it.
        if (scope.stars[i] === undefined) {
            scope.stars.push({
                filled: filled
            });
        } else {
            scope.stars[i].filled = filled;
        }
    }

};

// Trigger an update immediately.
updateStars(scope.ratingValue /* instead of blank */ );

scope.$watch('ratingValue', function(value, previousValue) {
    // Only update the view when the value changed.
    if (value !== previousValue) {
        updateStars(scope.ratingValue /* instead of blank */ );
    }
});

// Triggered when the cursor enters a star rating (li element).
scope.onMouseEnter = function (event, rating) {
    updateStars(rating);
};

// Triggered when the cursor leaves a star rating.
scope.onMouseLeave = function (event) {
    updateStars(scope.ratingValue);
};