使用angularjs使用ng-repeat和json数据进行CSS星级评级

CSS Star Rating with ng-repeat and json data using angularjs

本文关键字：使用 CSS 数据 angularjs ng-repeat json      更新时间：2023-09-26

希望根据从JSON接收到的值显示一个div n次

我对象:

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

如果一个产品有3个评级意味着div必须显示三次，如星级。
如何在angular.js中实现呢?

My Plunker Demo

你可以试试这个吗，

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'，您可以随意更改。

geNumber()将创建一个具有评级大小的空数组。无论

里面是什么，ng-repeat都会迭代它。

track by $index在这种情况下是必要的，因为您将多次显示相同的值，并且不允许在重复器中重复

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>

您可以根据评级创建一个数组。然后在数组上重复:

<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 =预览

如果你喜欢，你可以使用这个ES6解决方案来显示x个*:
注意:不支持IE。

JS 

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


<span ng-repeat="x in getAsterisks(array.rating) track by $index">{{x}}</span>

砰砰作响:https://plnkr.co/edit/9H3j3NH9w5xNvqM142Gq?p=preview

ES6函数信息:
Array.from (IE中不支持)从字符串创建数组，每个字符成为数组项。
String.prototype.repeat(不支持IE和Opera)…

<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>

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>

一个更好的方法是通过一个自定义指令来创建一个星型组件，它也可以在整个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

相关文章：