实施星级评定 Angular

Question

我是 angular 的新手。我有一个 angular 页面。可以选择对特定用户进行评级。但我不知道如何实施？我将拥有唯一的代码

<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

Implement star rating Angular

rating

angularjs