Display images in a rating system using Angular's ng-repeat directive

Need help with modifying star images based on ratings? I have two PNG files, one with an empty star and one with a full star. My goal is to dynamically adjust the number of stars displayed depending on the rating given, which ranges from 1 to 5. However, my current code isn't functioning as expected:

<div>
    <img ng-repeat="i in getNumberOfFullStars(company.AverageReview)" ng-src="{{starPhoto}}">
    <img ng-repeat="i in getNumberOfEmptyStars(company.AverageReview)" ng-src="{{emptyPhoto}}">
</div>

JavaScript Code Snippet:

$scope.getNumberOfFullStars = function(num){
    return new Array(num);
};

$scope.getNumberOfEmptyStars = function(num){
    var emptyCount = 5-num;
    return new Array(emptyCount);
};

If you have any insights or suggestions, I would greatly appreciate your assistance. Thank you!

Answer №1

Why use two separate images when you can simplify by using just one image and checking against $index? Customize it to suit your requirements

<div>
    <img data-ng-repeat="i in ratings" data-ng-src="{{ ($index < company.AverageReview) && starPhoto || emptyPhoto }}" />
</div>

$scope.ratings=[];
$scope.ratings.length = 5;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize AngularJS $sanitize to convert characters into HTML code

When attempting to decode characters using $sanitize, I encountered a problem. I must use the $sanitize service instead of ng-bind-html, yet I am getting different results with each one. Despite ng-bind-html utilizing $sanitize internally, the outputs are ...

Pressing a button meant to transfer text from a textarea results in the typed content failing to show up

Having trouble with a custom text area called a math field. I'm currently interning on a project to build a math search engine, where users can input plain text and LaTeX equations into a query bar. The issue I'm facing is that sometimes when th ...

Error: The program is encountering an issue because it is trying to scan a file that is not a directory in the "./src/functions/" path. This error message appears when the program encounters a "

node:internal/fs/utils:351 throw err; ^ Error: ENOTDIR: not a directory, scandir './src/functions/.DS_Store' at Object.readdirSync (node:fs:1532:3) at Object.<anonymous> (/Users/roopa/Desktop/projects/LLbot/src/bot.js:43:6 ...

Create a dynamic form using JSON data and the Material UI library

Looking for assistance in creating a dynamic form on Next.js by parsing JSON files and generating the required components from the JSON data. Additionally, seeking guidance on utilizing the Material UI library for styling. Any examples or help would be g ...

How can I dynamically assign ngModel in AngularJS?

I've created a directive with an isolate scope that maps a list of objects to inputs for modifying a specific property. However, I now aim to make this component more universal by allowing it to bind to deeply nested properties within each object. Fo ...

Unable to locate the requested document using the provided query string parameter

Searching for a specific document in my database using a query string referencing a user_id from a profile schema: ProfileSchema = Schema( user_id: type: Schema.Types.ObjectId vehicules: [VehiculeSchema] home: {type:Schema.Types.ObjectId, ref: &apos ...

Transition not influencing the scale property when activating a class

My modal is not scaling in and out properly when I toggle the 'active' class. It either fully scales out or scales in without any transition. Example: const openPopupButtons = document.querySelectorAll('[data-popup-target]'); const ...

Using Passport.js with a custom callback function that accepts parameters

I currently have this block of code: app.post('/login', passport.authenticate('local', { failureRedirect: '/login', failureFlash: true }), function(req, res) { return res.redirect('/profile/&a ...

Once the button is clicked, the data labeled as "Undefined" will be saved to the database utilizing Angular, Jade, Heroku, Node, and PostgreSQL

My program is attempting to insert data into a PostgreSQL database on Heroku, but whenever I click the appropriate button, it saves the data as "Undefined". Could the issue be related to how I am referencing the variables? The application is built using N ...

Is there a way in asp.net to enable users to switch a textbox to a grid view by clicking a button on the webpage?

I currently have a multiline textbox for users to input text. I want to give them the option to switch this textbox to a grid layout when they click a button labeled "Switch to Grid". How can I replace the textbox with a grid layout in the same location ...

Sending PHP variables to a pie chart in JavaScript via GoogleSome options for passing

I am currently working on a project where I have a 3D pie chart from Google. I am trying to pass PHP variables through to represent the percentages on the chart, which are pulled from a database. However, I am running into an issue where the percentage dis ...

What is the method for utilizing await within the NodeJs terminal?

When I use the Node Js terminal to perform quick tasks or analyze data, one limitation I face is the inability to wait for an asynchronous function: mymachine$ node > const request = require('request-promise-native') undefined > await requ ...

What are the advantages of ng-view compared to ui-view?

When it comes to large projects, many developers prefer using ui-router. One key advantage it offers is the ability to have nested views. However, this feature can also be achieved using ng-view. So the question remains - which option is the best choice? ...

Is it a good idea to resize images sourced from other websites before displaying them on your

I am currently working on a project that involves fetching images from various websites and displaying a thumbnail or resized version of the original image. Since I will be fetching many images at once, loading the original image files can take longer. ...

modify the final attribute's value

Hello I've been using skrollr js to create a parallax website. However, the issue arises when determining the section height, as it depends on the content within. My goal is to locate the last attribute and adjust the number value based on the section ...

Using Javascript to remove spans that do not have an id assigned

Is there a way to identify and remove spans without ids from a string? I have a text with several spans, some with ids and some without. Input: <span>Hi there!</span><span id="blabla">This is a test</span> Output: Hi there!< ...

Why am I unable to choose an element by its Id?

My goal is to pass an ID as an argument to a function in the following manner: HTML <button type="button" class="like btn" onclick="like('<%=postid%>')"> <svg id ='<%=likei ...

Verify if any column within a JSON object has a value of undefined, null, or is empty

Hey there, I'm a newcomer here and couldn't find any information on this topic after searching. Is there a method to scan a JSON object for empty values? For example, is there something like if(json[randomInt()].hasBlanks) that can be used? Or d ...

Animating a character's movement along a bezier curve using HTML5 canvas

Brand new to canvas and animations. What's the reason this (Fiddle) won't work with a sprite while this other one (Fiddle) works seamlessly with a rectangle fill? What element am I overlooking here: ctx.drawImage(img, 10, 10, 13, 50); It does ...

`In what way can I acquire auto-generated identifiers for selected documents?`

I am currently using Vue and Firestore in my project. Below is the code snippet I used to generate a document in the collection: <template> <input type="text" v-model="form.title"> </template> methods: { async sa ...