angularjs - 如何根据回复动态显示星级？

Question

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

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

如果评分 = 0.4，也会显示 1 颗星。

我的 Controller :

(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;
            }
         }
     }
  }
}) ();

我的 HTML 页面:

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

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

Answer 1

您的解决方案的一个问题是您的 $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 变量并附加到其上。这样做可能会产生一些不需要的副作用，并导致 View 不反射(reflect)模型值。最好初始化数组，然后追加该项目(如果该项目尚不存在)或更新现有值。所以你会得到这样的东西:

// 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;
        }
    }

};

由于 $watch 表达式仅在值更改时更新星星，因此您现在需要在第一次触发链接函数时触发更新。所以这很简单:

// Trigger an update immediately.
updateStars();

您的模板也没有正确利用星号上的 filled 属性，它应该包含适当的 ng-class ，如下所示:

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

风格简约，

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

.star.filled {
  color: yellow;
}

您还可以通过监听 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>

接下来，我们要对 updateStars 函数进行一些小调整以接受评级参数:

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 */ );
    }
});

现在我们可以从 View 添加事件回调，

// 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);
};

就是这样! Full demo here.