Chcesz pokazać liczbę razy div zgodnie z wartością otrzymaną od JSON.Ocena CSS z danymi ng-repeat i json przy użyciu angularjs
Moja obiektu:
$scope.pro = [
{
product: "chicken",
rating: 3
},
{
product: "fish",
rating: 3
},
{
product: "pizza",
rating: 4
}
];
Jeśli produkt ma ocen: 3 oznacza div musieli wykazać się trzy razy, niczym gwiazdek.
Jak to zrobić w angular.js?
można spróbować to,
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="[email protected]" 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>
Uwaga: Nazwa klasy dla wybranej gwiazdy jest wymieniana jako „pełny” i nie krępuj się to zmienić.
Można utworzyć tablicę, na podstawie ratingu. Następnie powtórz na tej tablicy:
<div ng-repeat="array in pro">
{{array.product}} , <span ng-repeat="n in createArray(array.rating) track by $index">X</span>
</div>
W kontrolerze:
$scope.createArray = function(n){
return new Array(n);
}
The plunker jest taki sam jak OP's –
Masz rację, zmieniłem go na poprawny – devqon
@ devqon mogę wiedzieć, jak wydrukować pozostałe divy (tj.) Chcę zapętlić 5 wartości., 3 wartość z json + 2 inna wartość? jak w przypadku gwiazdek. –
geNumber() utworzy pustą tablicę z wielkości znamionowej. ng-repeat będzie iteracyjne nad nim bez względu na to, co jest wewnątrz
track by $index jest konieczne w tym przypadku, ponieważ można wyświetlić wiele razy tę samą wartość i duplikatów w repeater nie są dozwolone
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>Jeśli czujesz się kręci, można użyć tej ES6 rozwiązanie, aby pokazać x liczba *:
Uwaga: no ie wsparcie na wszystko.
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
Informacje o funkcjach ES6:
Array.from (brak obsługi w IE) tworzy tablicę z łańcucha, każdy znak staje się elementem tablicy.
String.prototype.repeat (brak obsługi w IE i Operze) ... Powtarza ciąg X razy.
<div ng-repeat="array in pro">{{array.product}} ,
<span ng-repeat=" arr in array.rating ">{{arr.j}}</span>
</div>
// Kod idzie tutaj
// 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="[email protected]" 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>Lepszym sposobem, aby to zrobić, to utworzyć komponent gwiazd poprzez dyrektywy niestandardowej może też być ponownie wykorzystane przez cały Kątowymi aplikacji, niniejsza dyrektywa bierze rating i generuje liczbę gwiazdy w 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>ocenił Gwiazda inspirowany https://coderwall.com/p/iml9ka/star-ratings-in-css-utf8 dyrektywy
czy jest jakiś sposób na pokazanie nie wypełnionej gwiazdy? .. z pięciu? –
@RamanaaGj, nie dostałem cię, czy mógłbyś wyjaśnić, co nie jest pełnowartościową gwiazdą z pięciu sposobów, czy pytasz jak pokazać 4,5 na 5 gwiazdek coś w tym stylu? –
Mój scenariusz był powyżej jest dla mnie ok, ale w moim przypadku chciałem to pokazać https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRgnpnK8Gm81TmPR3SeoQztFGDPl23jkYdE5xkOgLBT_Q60F9IDgA –
angularjs ratings:
angular
.module('myApp', [])
.directive('ratings', function() {
return {
restrict: 'E',
scope: false,
template: '<span ng-repeat="x in arrRating track by $index">★</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="[email protected]" 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>
Czy mogę wiedzieć, jak wydrukować pozostałe elementy div (tj.) Chcę zapętlić 5 wartości., 3 wartości z json + 2 inne wartości? jak gwiazda Ocena –
Czy to zawsze 5? – Aruna
Można zmienić ... Możemy przejść do pięciu –