javascript - JavaScript-如何在AngularJS中动态显示只读星级？

在我的应用程序中，我有一个HTML页面，其中列出了商店的不同食品。同样，当单击单个项目时，将显示该特定项目的全部详细信息-属性之一是该项目的“星级”。

我对此有2个控制器-一个FoodItem控制器和另一个FoodItemDetails控制器。同样，我为每个控制器有2个模板-FoodItems.html和FoodItemDetails.html

在FoodItemController中，我使用-从SQLite数据库中获取所有食品的详细信息。

$scope.foodlists= foodListData;

其中，foodListData是fetchFood()函数中的一个数组，其中包含所有食物的所有详细信息。

然后在FoodItems.html中单击单个食品时

我正在使用设置特定食物的属性值

FoodFactory.setSelectedFoodData(tappedFood);


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

function getSelectedFoodData(data){
    return selectedFood;
};

在FoodItemDetails控制器中，我正在调用getter方法＆

$scope.FoodItem = FoodFactory.getSelectedFoodData();

现在在此$scope.FoodItem中，我具有特定食品的星级。
我想在我的FoodItemDetails.html中渲染该星级。

星级将是只读的。评级无法点击和更新。

$scope.FoodItem.starRating-包含单个食品的食品等级。我无法绑定此数据FoodItemDetails.html。

我可以轻松绑定其他属性，但无法绑定星级。
我无法在此应用程序中使用jQuery，只能使用Vanilla JS和Angular v1

javascript - JavaScript-如何在AngularJS中动态显示只读星级？-LMLPHP

第一张图片是必需的星星，第二张图片是我现在正在获取的图片

功能上明智的Saurabh Agarwal的答案是完美的。但是我想根据规格说明星星的样式。我基本上想要空心和实心的星星，而第一个图像就是我想要的

最佳答案

在大约一个小时的工作之后，我发现您正在得到$scope.FoodItem.starRating = "4"这是一个字符串，因此您需要将其转换为Number，请尝试此解决方案，希望它对您有用。

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