如何使用 AngularJS 创建 5 颗评级星，其中第三颗被禁用

Question

我想在用户对企业进行评分时添加限制条件。 用户不能投票 3 因为这是系统给我们数据库中任何新添加的业务的默认比率。

我正在使用 AngularJS 作为前端 Javascript 库并创建评分栏，我正在使用 ui.bootstrap.rating 模块.

我想做的是这样的（用户点击第四颗星的情况）

我试的是这个

Html代码

<uib-rating ng-model="rateNumber1" max="2"
            state-on="'fullStar'" state-off="'emptyStar'"
            aria-labelledby="custom-icons-1"
            read-only="false">
</uib-rating>
<uib-rating ng-model="rateNumber2" max="1"
            state-on="'thirdStar'" state-off="'emptyStar'"
            on-hover="onHoverRatingNumber2()" on-leave="onLeaveRatingNumber2()"
            aria-labelledby="custom-icons-1"
            read-only="false">
</uib-rating>
<uib-rating ng-model="rateNumber3" max="2"
            state-on="'fullStar'" state-off="'emptyStar'"
            on-hover="onHoverRatingNumber3()" on-leave="onLeaveRatingNumber3()"
            aria-labelledby="custom-icons-1"
            read-only="false">
</uib-rating>

Javascript 为此目的在控制器中创建的函数

/* rating a business */
$scope.rateNumber1 = 0;
$scope.rateNumber2 = 0;
$scope.rateNumber3 = 0;
$scope.onHoverRatingNumber3 = function () {
  $scope.rateNumber1 = 2;
  $scope.rateNumber2 = 1;
};
$scope.onLeaveRatingNumber3 = function () {
  $scope.rateNumber1 = 0;
  $scope.rateNumber2 = 0;
};
$scope.onHoverRatingNumber2 = function () {
  $scope.rateNumber1 = 2;
};
$scope.onLeaveRatingNumber2 = function () {
  $scope.rateNumber1 = 0;
};

CSS 类创建自定义评级图标

.emptyStar {
  height: 18px;
  width: 18px;
  background-size: 100% 100%;
  background-image: url("../img/ratingStars/empty.png");
}

.fullStar {
  height: 18px;
  width: 18px;
  background-size: 100% 100%;
  background-image: url("../img/ratingStars/full.png");
}

.thirdStar {
  height: 18px;
  width: 18px;
  background-size: 100% 100%;
  background-image: url("../img/ratingStars/thirdStar.png");
}

Answer 1

您可以使用 ui.bootstrap.rating 模块的 rating-states 设置。

来自文档

rating-states (Default: null) - An array of objects defining properties for all icons. In default template, stateOn & stateOff property is used to specify the icon's class.

首先，您应该在控制器中指定评级状态

$scope.ratingStates = [
    {stateOn: 'fullStar', stateOff: 'emptyStar'},
    {stateOn: 'fullStar', stateOff: 'emptyStar'},
    {stateOn: 'thirdStar', stateOff: 'emptyStar'},
    {stateOn: 'fullStar', stateOff: 'emptyStar'},
    {stateOn: 'fullStar', stateOff: 'emptyStar'}
  ];

然后创建一个函数，在点击第三颗星时将评分重置为零（以防止用户选择 3 作为评分）

 $scope.changeRate = function(r){
    if(r==3){
      $scope.rate=0;
    }
  };

最后在你的 html

中分组

<uib-rating ng-change="changeRate(rate)" 
            ng-model="rate"    
            rating-states="ratingStates" 
            aria-labelledby="custom-icons-2">
</uib-rating>

这是一个有效的 example.

如何使用 AngularJS 创建 5 颗评级星，其中第三颗被禁用

How to create 5 rating stars with AngularJS which the third one is disabled

html

javascript

css

angularjs

angular-ui-bootstrap