使用angularjs的ng-repeat和json数据的CSS星级评分

时间:2016-11-04 12:04:21

标签: javascript angularjs json angularjs-ng-repeat

希望根据从JSON收到的值显示div次。

我的对象:

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

如果某个产品有3个评级,则表示div必须显示三次,例如星级评分 如何在angular.js中做到这一点?

My Plunker Demo

7 个答案:

答案 0 :(得分: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>

注意:所选星标的类名称称为“完整”,可随意更改。

答案 1 :(得分: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

答案 2 :(得分: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>

答案 3 :(得分:1)

如果您感觉很有兴趣,可以使用此 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次。

答案 4 :(得分: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>

答案 5 :(得分:1)

更好的方法是通过自定义指令创建一个星形组件,它也可以在整个Angular应用程序中重复使用,该指令获取评级并生成DOM中的星数。

&#13;
&#13;
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;
}
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;

https://coderwall.com/p/iml9ka/star-ratings-in-css-utf8启发的星级评分

答案 6 :(得分:1)

AngularJS指令ratings

&#13;
&#13;
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}];
    });
&#13;
<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>
&#13;
&#13;
&#13;