En mi aplicación tengo una página HTML en la que se enumeran los diferentes alimentos de una tienda. Una vez más, cuando se hace clic en un solo elemento, se muestran todos los detalles de ese elemento en particular; uno de los atributos es "Clasificación por estrellas" del elemento.

Tengo 2 controladores con respecto a esto: un controlador FoodItem y otro controlador FoodItemDetails. Asimismo, tengo 2 plantillas para cada controlador: FoodItems.html y FoodItemDetails.html

En FoodItemController obtengo los detalles de todos los alimentos de la Base de datos SQLite usando -

$scope.foodlists= foodListData;

Donde foodListData es una matriz en la función fetchFood() que contiene todos los detalles de todos los alimentos.

Luego, cuando se hace clic en un solo alimento en FoodItems.html

Estoy configurando los valores de los atributos de ese alimento en particular usando

FoodFactory.setSelectedFoodData(tappedFood);


function setSelectedFoodData(data){              
    selectedFood = data;              // where selectedFood is new variable
};

function getSelectedFoodData(data){             
    return selectedFood;       
};

En el controlador FoodItemDetails, estoy llamando al método getter &

$scope.FoodItem = FoodFactory.getSelectedFoodData();

Ahora en este $scope.FoodItem tengo la calificación de estrellas para el alimento específico. Quiero representar esa calificación de estrellas en mi FoodItemDetails.html.

La calificación de estrellas será de solo lectura. No se puede hacer clic ni actualizar la calificación.

$scope.FoodItem.starRating: contiene la clasificación de alimentos para el alimento individual. No puedo vincular estos datos FoodItemDetails.html.

Puedo vincular fácilmente los otros atributos pero no puedo vincular la calificación de estrellas. No puedo usar jQuery en esta aplicación, solo puedo usar Vanilla JS y Angular v1

The star rating I want to have

The star rating I am getting now

La primera imagen es la estrella requerida y la segunda es la que estoy obteniendo ahora mismo

La respuesta de Saurabh Agarwal en cuanto a funcionalidad es perfecta. Pero quiero tener el estilo de la estrella de acuerdo con las especificaciones. Básicamente quiero estrellas huecas y llenas y la primera imagen es lo que estoy buscando

1
msm0204 16 abr. 2017 a las 08:37

2 respuestas

La mejor respuesta

Después de trabajar en esto alrededor de una hora, descubrí que está obteniendo $scope.FoodItem.starRating = "4", que es una cadena, por lo que debe convertirla en Número, pruebe esta solución Espero que funcione para usted ...

<!DOCTYPE html>
<html ng-app="myApp">
<head>
	<title></title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
	<script type="text/javascript">
		angular.module('myApp', [])
		.controller("mainCtrl", function ($scope) {
			$scope.FoodItem = {};
			$scope.FoodItem.starRating = "4";//this is what you are getting from db
			//you need to conver it to number
			// $scope.FoodItem.starRating = Number($scope.FoodItem.starRating);
			$scope.starRatingData = [{
				id:1,
				colored : 'red'
			},{
				id:2,
				colored : 'red'
			},{
				id:3,
				colored : 'red'
			},{
				id:4,
				colored : 'red'
			},{
				id:5,
				colored : 'red'
			}];
			for (var i = 0; i < $scope.FoodItem.starRating; i++) {
				$scope.starRatingData[i].colored = 'blue';
			}

		});
	</script>
</head>
<body ng-controller="mainCtrl">
	<span ng-repeat="data in starRatingData">
		<span ng-style="{color: data.colored}">&#9734;</span>
	</span>
</body>
</html>
0
Saurabh Agrawal 16 abr. 2017 a las 08:01

Puede usar un bucle for para compilar html y ng-bind-html para vincular / representar el html generado (Nota: inyecte el servicio $sce). Compruebe esto plnkr . (He usado input para que pruebes si está generando el número requerido de estrellas o no. Siéntete libre de diseñar tus estrellas según tu elección).

Espero que esto ayude.

1
Yogesh Mistry 16 abr. 2017 a las 10:12