Displaying icon.png in Angular based on item attribute - a step-by-step guide

Question

Displaying icon.png in Angular based on item attribute - a step-by-step guide

My data is stored in an array of objects with information about people:

[{"name":"Steve", "hourly_wage":16, "status":"part-time"},
{"name":"Maria", "hourly_wage":25, "status":"full-time"},
{"name":"Jose", "hourly_wage":21, "status":"former"}]

I am looking to visually represent each person's employment status using icons. A full circle for full time, a half circle for part time, and an empty circle for former employees. How can I achieve this using Javascript/Angular? Would using if statements inside ng-hide be the best approach?

javascript angularjs if-statement angularjs-ng-repeat ng-hide

Answer 1

Answer №1

In my view, the most straightforward approach would be to create a mapping and then utilize it.

JavaScript:

$scope.statusIconMapping = {"part-time": "half_circle.jpg", 
    "full-time": "full_circle.jpg", 
    "former": "empty_circle.jpg"
};

HTML Markup:

<div ng-repeat="employee in employees">
    ...
    <img src="{{statusIconMapping[employee.status]}}" />
</div>

Answer 2

In my view, the most straightforward approach would be to create a mapping and then utilize it.

JavaScript:

$scope.statusIconMapping = {"part-time": "half_circle.jpg", 
    "full-time": "full_circle.jpg", 
    "former": "empty_circle.jpg"
};

HTML Markup:

<div ng-repeat="employee in employees">
    ...
    <img src="{{statusIconMapping[employee.status]}}" />
</div>

Answer 3

Answer №2

How you bring in those icons will determine the method to use. Are they images? Fonts? To make it work, assuming you are using images named part-time.jpg, full-time.jpg, former.jpg and located in a /resources folder, try the code below:

<div ng-repeat="obj in list">
    <img ng-src="/resources/{{obj.status}}.jpg"/>
    {{obj.name}}
</div>

This approach is also suitable for fonts and other resources.

Answer 4

How you bring in those icons will determine the method to use. Are they images? Fonts? To make it work, assuming you are using images named part-time.jpg, full-time.jpg, former.jpg and located in a /resources folder, try the code below:

<div ng-repeat="obj in list">
    <img ng-src="/resources/{{obj.status}}.jpg"/>
    {{obj.name}}
</div>

This approach is also suitable for fonts and other resources.

Answer 5

Answer №3

To determine the icon displayed, utilize the status property as your condition in the HTML like so:

<div ng-src="/images/icons/{{ status }}.png"></div>

...resulting in

<div src="/images/icons/part-time.png"></div>

or similar based on the status.

It is crucial to use ng-src over src to avoid issues where the page loads before AngularJS renders, causing the browser to search for a file named {{ foo }}, which does not exist.

Avoid unnecessary complexity in your logic by simply adding another property to the JSON for displaying icons based on status. For instance, if status is full-time, set 'full-circle.png' as the icon in the JSON, or use the status itself as the icon name for simplicity.

Consider this approach:

{
   status: 'full-time', icon: 'full-circle.png'
}

Alternatively:

{
   status: 'full-time'
}

Name your icon file as full-time.png for easy integration into the HTML without additional logic or properties.

Answer 6

To determine the icon displayed, utilize the status property as your condition in the HTML like so:

<div ng-src="/images/icons/{{ status }}.png"></div>

...resulting in

<div src="/images/icons/part-time.png"></div>

or similar based on the status.

It is crucial to use ng-src over src to avoid issues where the page loads before AngularJS renders, causing the browser to search for a file named {{ foo }}, which does not exist.

Avoid unnecessary complexity in your logic by simply adding another property to the JSON for displaying icons based on status. For instance, if status is full-time, set 'full-circle.png' as the icon in the JSON, or use the status itself as the icon name for simplicity.

Consider this approach:

{
   status: 'full-time', icon: 'full-circle.png'
}

Alternatively:

{
   status: 'full-time'
}

Name your icon file as full-time.png for easy integration into the HTML without additional logic or properties.

Displaying icon.png in Angular based on item attribute - a step-by-step guide

Answer №1

Answer №2

Answer №3

Similar questions

Tips for implementing the quill-image-drop-module with Vue 3

Add an item to the second occurrence of a specific HTML class

Unleashing the power of React: Integrating raw HTML <a href> tags with JavaScript

Start by setting up the Select box to include a loading option, which will then be removed once the

Looking for a way to upload only part of a large file using HTML and PHP

Is it possible to combine the existing request parameters with a new parameter in JSP/JSTL/JQuery?

Root scope digest trigger delay

What is the best way to send a parameter in pug?

Struggling to remove an image while using the onmouseover event with a button?

Is it necessary for the raycaster to be positioned within the render() function at all times?

Issue with error handling not being triggered when calling SAPUI5 function()

Managing timestamps of creation and modification with Sequelize and Postgresql

Axios.post makes the request twice

Vue - Find matching data in an array of objects and render it on the page

Avoiding cheating in a JavaScript game

Having trouble with AngularJS? Ng-switch not updating after ng-click?

How can I obtain the width of one element and then use it to adjust the size of another element that is

Disable the click functionality while preserving the hover feature

Update the src of #contentImg to display the image from the clicked link

Leverage JSON data within an AngularJS controller