JavaScript-如何在AngularJS中動態顯示只讀星級評分？

在我的應用程序中，我有一個HTML頁面，其中列出了商店的不同食品項目。再次點擊單個項目時，會顯示該特定項目的全部詳細信息 - 其中一個屬性爲項目的「星級」。JavaScript-如何在AngularJS中動態顯示只讀星級評分？

我對此有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我有特殊的星級評定fic食品。我想在我的FoodItemDetails.html中呈現星級評分。

星級評分將爲只讀。該評級無法點擊&已更新。

$scope.FoodItem.starRating - 這包含單個食品的食品評級。我無法綁定這個數據FoodItemDetails.html。

我可以輕鬆地綁定其他屬性，但無法綁定星級。我不能在此應用程序使用jQuery，我只能用香草JS和角度V1

第一個圖像是必需的明星&：第二個是一個我得到的權利現在

功能明智Saurabh Agarwal的答案是完美的。但是我想根據規範來設計明星的造型。我基本上要空心，充滿恆星和第一個形象是什麼，我找

來源

2017-04-16 msm0204

避免**過度使用**粗體文本 –

這可能是一個範圍相關的問題，你可以發佈一些代碼嗎？ –

@Aayushi Jain不，它不是這樣，如果一個食物項目評分3或說4我可以很容易地用文字顯示，但問題是，我必須顯示在星星不是文字 – msm0204

在這一個小時左右的工作後，我發現，你得到$scope.FoodItem.starRating = "4"這是一個字符串，所以你需要將其轉換爲數字，嘗試這種解決方案希望它會爲你工作..

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

 
\t \t }); 
 
\t </script> 
 
</head> 
 
<body ng-controller="mainCtrl"> 
 
\t <span ng-repeat="data in starRatingData"> 
 
\t \t <span ng-style="{color: data.colored}">&#9734;</span> 
 
\t </span> 
 
</body> 
 
</html>

來源

2017-04-16 08:01:30

功能明智完美。但是，你可以請一些造型的人幫忙嗎？我想根據規範來設計明星的造型。我在問題部分上傳了2張圖片 - 我現在得到的星星類型和我想要的星星類型。我基本上想要空心和充滿星星。請看更新的問題部分 – msm0204

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_glyph_star&stacked=h –

https://jsfiddle.net/leaverou/CGP87/ –

可以使用for循環建立HTML和ng-bind-html綁定/渲染生成的HTML（注：注$sce服務）。檢查此plnkr。（我已經使用input來測試它是否產生了所需數量的恆星。隨意按照您的選擇設計您的星星。）

希望這有助於您。

來源

2017-04-16 07:44:02

感謝隊友中創建的函數'addStars'。如果我可以選擇將你的答案（你和Saurabh的）都標記爲已接受，那麼我可以做到這一點。但是，不可能將2個答案標記爲接受同一個問題 – msm0204

@ msm0204沒關係。沒問題。很好，你發現我的答案有用。 –

JavaScript-如何在AngularJS中動態顯示只讀星級評分？

回答

相關問題