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

我想在用户对业务进行评级时添加一个约束用户不能投票3，因为这是系统对数据库中任何新添加的业务给出的默认比率

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

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

我试过的是这个

Html代码

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

/*对企业进行评级*/
$scope.rateNumber1=0；
$scope.rateNumber2=0；
$scope.rateNumber3=0；
$scope.onHoverRatingNumber3=函数（）{
$scope.rateNumber1=2；
$scope.rateNumber2=1；
};
$scope.onLeaveRatingNumber3=函数（）{
$scope.rateNumber1=0；
$scope.rateNumber2=0；
};
$scope.onHoverRatingNumber2=函数（）{
$scope.rateNumber1=2；
};
$scope.onLeaveRatingNumber2=函数（）{
$scope.rateNumber1=0；
};

CSS类创建自定义评级图标

.emptyStar{
高度：18px；
宽度：18px；
背景大小：100%100%；
背景图片：url（“../img/ratingStars/empty.png”）；
}
福星先生{
高度：18px；
宽度：18px；
背景大小：100%100%；
背景图片：url（“../img/ratingStars/full.png”）；
}
第三颗星先生{
高度：18px；
宽度：18px；
背景大小：100%100%；
背景图片：url（“../img/ratingStars/thirdStar.png”）；
}

您可以使用ui.bootstrap.rating模块的分级状态设置

从医生那里

分级状态（默认值：null）-定义 所有图标的属性。在默认模板中，stateOn和stateOff 属性用于指定图标的类

首先，您应该在控制器中指定额定值状态

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

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

最后在html中将所有内容分组

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

---

下面是一个有效的

如果用户投票2，然后想将其改回3，会发生什么？只是出于好奇，这与解决问题无关。答案很好，我不知道我可以为每个费率选择一个特定的图标。非常感谢。

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