logo标签列表

使用AngularJS的ng-repeat和JSON数据实现CSS星级评分

javascriptangularjsjsonangularjs-ng-repeat
6

希望根据从JSON中接收到的值，显示一个

标签n次。

我的对象：

$scope.pro = [
    {
        product: "chicken", 
        rating: 3
    },
    {
        product: "fish", 
        rating: 3
    },
    {
        product: "pizza", 
        rating: 4
    }
];

如果一个产品有3个评分，那么
标签必须显示三次，就像星级评分一样。如何在Angular.js中实现呢？ 我的Plunker演示
7个回答
4

您能试一下这个吗，

JS

$scope.pro = [{product: "chicken", rating: 3},{product: "fish", rating: 3},{product: "pizza", rating: 4}];

var ratingTotal = 5; 

$scope.getRepeater = function() {
   return new Array(ratingTotal);
};

Html

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="myController">

    <div ng-repeat="array in pro">{{array.product}} <span class="star-icon" ng-repeat="r in getRepeater() track by $index" ng-class="{'full': ($index + 1) <= array.rating, 'half': ($index + .5) == array.rating}" ></span></div>

  </body>

</html>

注意：所选星级的类名为“full”，请随意更改。

我可以知道如何打印出剩余的div吗？也就是说，我想循环5个值，其中3个值来自json，另外2个值呢？就像星级评分一样。 - User_3535
可以更改...我们可以选择五。 - User_3535
请告诉我所选星级的CSS类名称，我将进行代码更改。 - Aruna
你可以参考这个链接：https://coderwall.com/p/iml9ka/star-ratings-in-css-utf8 - User_3535
1
好的，根据链接，我已经更新了上面的代码，加入了一个名为“full”的类。 - Aruna
显示剩余3条评论
3

geNumber()会创建一个大小为评分的空数组。ng-repeat将无论内部有什么内容都会对其进行迭代。

track by $index is necessary in this case because you will display multiple times the same value and duplicates in a repeater are not allowed 

var app = angular.module('myApp', []);

app.controller('myController', function($scope) {
  $scope.pro = [{
    product: "chicken",
    rating: 3
  }, {
    product: "fish",
    rating: 3
  }, {
    product: "pizza",
    rating: 4
  }];
  
  $scope.getNumber = function(num){
    return new Array(num);
  }  
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myController">

  <div ng-repeat="item in pro">
    <div ng-repeat="n in getNumber(item.rating) track by $index">
      {{item.product}}
    </div>
  </div>

</body>

3
您可以根据评分创建一个数组，然后对该数组进行重复操作。
<div ng-repeat="array in pro">
    {{array.product}} , <span ng-repeat="n in createArray(array.rating) track by $index">X</span>
</div>

在你的控制器中：
$scope.createArray = function(n){    
    return new Array(n);
}

https://plnkr.co/edit/gUPn6m7Tiu01yksa9VOs?p=preview

Plunker与OP的相同。 - George Kagan
@devqon，我可以了解一下如何打印剩余的div吗？即我想循环5个值。从JSON中取3个值+另外2个值？就像星级评分一样。 - User_3535
1
更好的方法是通过自定义指令创建一个星级组件，它可以在整个Angular应用程序中重复使用，该指令接受评分并在DOM中生成相应数量的星星。 

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController)
  .controller('StarController', StarController)
  .directive('star', star);

function DefaultController() {
  var vm = this;
  vm.products = [{
    product: "chicken",
    rating: 3
  }, {
    product: "fish",
    rating: 4
  }, {
    product: "pizza",
    rating: 5
  }];
}

function star() {
  var directive = {
    restrict: 'E',
    scope: {
      rating: '=',
      max: '='
    },
    link: linkFunc,
    controller: StarController,
    controllerAs: 'star',
    bindToController: true
  };

  return directive;

  function linkFunc(scope, element, attrs, ngModelCtrl) {
    for (var i = 0; i < scope.max; i++) {
      var fillStyle = '';
      if (i < scope.rating) {
        fillStyle = 'fill';
      } else {
        fillStyle = 'empty';
      }

      element.append('<span class="star-icon ' + fillStyle + '">☆</span>');
    }
  }
}

function StarController() {
  var vm = this;
}
ul {
  font-size: 20px;
  list-style-type: none;
  padding: 0;
}
ul li {
  padding: 10px;
}
ul li > span {
  display: inline-block;
  width: 100px;
}
star span {
  margin: 0px 5px;
}
.star-icon {
  color: #ddd;
  font-size: 1.5em;
  position: relative;
  top: 3px;
}
.star-icon.fill:before {
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
  color: #FDE16D;
  content: '\2605';
  position: absolute;
  left: 0;
}
.star-icon.empty:before {
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
  color: #FFF;
  content: '\2605';
  position: absolute;
  left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <ul>
      <li ng-repeat="product in ctrl.products">
        <span ng-bind="product.product"></span>
        <star rating="product.rating" max="5"></star>
      </li>
    </ul>
  </div>
</div>

这个星级评分灵感来源于https://coderwall.com/p/iml9ka/star-ratings-in-css-utf8

有没有办法显示非满星？比如五颗星中的不足五颗星？ - User_3535
@RamanaaGj，我没听懂你的意思，请问你能否详细解释一下什么是非满分五星评价？你是在问如何显示4.5颗星之类的评分吗？ - Abdul Mateen Mohammed
我的情况对我来说是可以的，但在我的情况下，我想展示像这样的内容 https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRgnpnK8Gm81TmPR3SeoQztFGDPl23jkYdE5xkOgLBT_Q60F9IDgA - User_3535
在5个中应该有3个是金色的，剩下的将是灰色的星星..就像这样.. - User_3535
1
一个AngularJS指令ratings: 

angular
    .module('myApp', [])
    .directive('ratings', function () {
        return {
            restrict: 'E',
            scope: false,
            template: '<span ng-repeat="x in arrRating track by $index">&#9733;</span>',
            link: function ($scope, $el, $attr) {
                $scope.arrRating = new Array(+$attr.rating);
            }
        };
    })
    .controller('myController', function ($scope) {
        $scope.pro = [{product: "chicken",rating: 3}, {product: "fish",rating: 3}, {product: "pizza",rating: 4}, {product: "steak",rating: 10}];
    });
<script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>

<div ng-app="myApp" ng-controller="myController">
  <div ng-repeat="p in pro">
     {{p.product}} <ratings rating="{{p.rating}}"></ratings>
  </div>
</div>

1
如果你想要更高级的操作，你可以使用这个ES6方案来展示x个*：
注意：完全不支持IE浏览器。

JavaScript

$scope.getAsterisks = rating => Array.from('*'.repeat(parseInt(rating, 10)));

HTML（超文本标记语言）
<span ng-repeat="x in getAsterisks(array.rating) track by $index">{{x}}</span>

Plunker: https://plnkr.co/edit/9H3j3NH9w5xNvqM142Gq?p=preview

ES6函数的信息:
Array.from（不支持IE）从字符串创建一个数组，其中每个字符成为一个数组项。
String.prototype.repeat（不支持IE和Opera）...重复字符串X次。

1

<div ng-repeat="array in pro">{{array.product}} ,
  <span ng-repeat=" arr in array.rating ">{{arr.j}}</span>
</div>

// 代码放在这里

// Code goes here

var app = angular.module('myApp', []);

app.controller('myController', function($scope) {
  $scope.pro = [{product: "chicken", rating: 3},{product: "fish", rating: 4},{product: "pizza", rating: 6}];
  for(var i=0;i<$scope.pro.length;i++)
  {
     if($scope.pro[i].rating >0)
     {
         $scope[$scope.pro[i].product]=[];
         for(var j=0;j< $scope.pro[i].rating;j++)
         {
            $scope[$scope.pro[i].product].push({j:'*'}); 
         }
         $scope.pro[i].rating = $scope[$scope.pro[i].product];
     }
  }
});
<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="myController">

    <div ng-repeat="array in pro">{{array.product}} ,
      <span ng-repeat=" arr in array.rating ">{{arr.j}}</span>
    </div>
    
  </body>

</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接