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

debugcn 发表于 Dev

msm0204

在我的应用程序中，我有一个 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

第一张图片是所需的星星，第二张是我现在得到的

功能明智的 Saurabh Agarwal 的回答是完美的。但我想根据规范拥有明星的造型。我基本上想要空心和填充的星星，第一个图像就是我要找的

索拉布·阿格拉瓦尔

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。