使用angularjs的ng-repeat和json數據的CSS星級評分

Question

想要根據從JSON收到的值顯示div 。

我的目標：

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

如果一個產品有3個評級意味着div必須顯示三次，如星級。
如何在angular.js中做到這一點？

我的Plunker演示

Answer 1

你能試試嗎

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>

注意：所選星標的類名稱稱為“完整”，可隨意更改。

Answer 2

您可以根據評級創建陣列。 然后重復該數組：

<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

Answer 3

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>

Answer 4

如果您感覺很花哨，可以使用此ES6解決方案顯示x數* ：
注意：根本沒有IE支持。

JS

$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次。

Answer 5

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

Answer 6

更好的方法是通過自定義指令創建一個星形組件，它也可以在整個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

Answer 7

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>

使用angularjs的ng-repeat和json數據的CSS星級評分

問題描述

7 個解決方案

解決方案1
4 已采納 2016-11-04 12:12:44

解決方案2
3 2016-11-04 12:12:24

解決方案3
3 2016-11-04 12:12:37

解決方案4
1 2016-11-04 12:29:53

解決方案5
1 2016-11-04 12:41:39

解決方案6
1 2016-11-04 12:50:27

解決方案7
1 2016-11-04 14:42:25

使用angularjs的ng-repeat和json數據的CSS星級評分

問題描述

7 個解決方案

解決方案1 4 已采納 2016-11-04 12:12:44

解決方案2 3 2016-11-04 12:12:24

解決方案3 3 2016-11-04 12:12:37

解決方案4 1 2016-11-04 12:29:53

解決方案5 1 2016-11-04 12:41:39

解決方案6 1 2016-11-04 12:50:27

解決方案7 1 2016-11-04 14:42:25

解決方案1
4 已采納 2016-11-04 12:12:44

解決方案2
3 2016-11-04 12:12:24

解決方案3
3 2016-11-04 12:12:37

解決方案4
1 2016-11-04 12:29:53

解決方案5
1 2016-11-04 12:41:39

解決方案6
1 2016-11-04 12:50:27

解決方案7
1 2016-11-04 14:42:25