Question

我是棱角分明的新人。我有一个有角度的页面。可以选择对特定用户进行评级。但我不知道如何实现它？我将拥有唯一的代码

<div class="col-xs-12 col-sm-6  col-md-7 col-lg-12 no-padding">Overal Rating: 
  <span class="fa fa-star-o"></span> 
  <span class="fa fa-star-o"></span> 
  <span class="fa fa-star-o"> </span> 
  <span class="fa fa-star-o"> </span> 
   <span class="fa fa-star-o"></span>
</div>

任何人都可以帮我解决问题吗？

Answer 1

SSH在你的问题评论中链接的jsfiddle中提供了一个更好的例子

从我可以收集的信息中，假设你想要点击一下用户点击的星号（1-5），就可以做到这样的事情

<div class="col-xs-12 col-sm-6  col-md-7 col-lg-12 no-padding">Overal Rating: 
  <span class="fa fa-star-o" data-ng-repeat="number in [1,2,3,4,5] track by $index" data-ng-click="setStars($index)" data-ng-style="litStars($index)"></span> 
</div>

...其中setStars是一个函数，让用户为他的评级设置星号数，litStars是一个控制元素CSS的函数，可能是背景颜色等。

<。>在.js文件中：

app.controller('yourApp', ['$scope', function($scope){
    $scope.stars = 0;
    $scope.setStars = function(value){
        $scope.stars = value;
    };
    $scope.litStars = function(value){
        if($scope.stars>=value){
           return { "background-color" : "yellow" };
        }
        else {
           return { "background-color" : "white" };
        }
    };

Answer 2

app.controller('yourApp', ['$scope', function($scope){
    $scope.stars = 0;
    $scope.setStars = function(value){
        $scope.stars = value+1;
    };
    $scope.litStars = function(value){
        if($scope.stars>value){
           return { "color" : "yellow" };
        }
        else {
           return { "color" : "grey" };
        }
    };

实施星级评级Angular

2 个答案: