Images in a horizontal dropdown selection menu

Question

Images in a horizontal dropdown selection menu

Currently, I have a traditional select dropdown that is data-bound with Angular.

<select class="form-control" ng-model="category">
   <option value="work">Work</option>
   <option value="home">Home</option>
   <option value="practical">Practical</option>
   <option value="no">No category</option>
</select>

My goal is to transform the dropdown options into horizontal images rather than vertical text. Here is what I envision:

SELECT BUTTON

work image - home image - practical image

I have experimented with using display: inline-blocks, floats, and even contemplated using radio buttons based on a related Stack Overflow question. As I am in the process of learning Angular, I would prefer to avoid the use of JQuery. Thank you for your help.

javascript html css angularjs

Answer 1

Answer №1

There are constraints regarding how you can customize selects. Your options include choosing from among the various customizable select plugins available or creating your own solution, like this:

<div ng-app="app">
    <div ng-controller="ctrlr">
        <span ng-repeat="entry in categories">
            <img ng-click="setCategory(entry)" ng-src="{{entry.src}}">
        </span>
        <div>Selected = {{category}}</div>
    </div>
</div>

<script>
    angular.module('app', []);
    angular.module('app').controller('ctrlr', function ($scope) {
        $scope.categories = [
            {
                code: 'work',
                src: 'Work.png'
            },
            {
                code: 'home',
                src: 'Home.png'
            },
            {
                code: 'practical',
                src: 'Practical.png'
            },
            {
                code: 'no',
                src: 'No category.png'
            }
        ];

        $scope.setCategory = function (entry) {
            $scope.category = entry.code;
        }
    });
</script>

Answer 2

There are constraints regarding how you can customize selects. Your options include choosing from among the various customizable select plugins available or creating your own solution, like this:

<div ng-app="app">
    <div ng-controller="ctrlr">
        <span ng-repeat="entry in categories">
            <img ng-click="setCategory(entry)" ng-src="{{entry.src}}">
        </span>
        <div>Selected = {{category}}</div>
    </div>
</div>

<script>
    angular.module('app', []);
    angular.module('app').controller('ctrlr', function ($scope) {
        $scope.categories = [
            {
                code: 'work',
                src: 'Work.png'
            },
            {
                code: 'home',
                src: 'Home.png'
            },
            {
                code: 'practical',
                src: 'Practical.png'
            },
            {
                code: 'no',
                src: 'No category.png'
            }
        ];

        $scope.setCategory = function (entry) {
            $scope.category = entry.code;
        }
    });
</script>

Images in a horizontal dropdown selection menu

Answer №1

Similar questions

Discover a step-by-step guide on showcasing SVG graphs in Vue using exclusively the SVG graph link

Choose the option in real-time with Jquery

What are the benefits of using CSS to convert text to uppercase?

Problem encountered when using the Mongoose find() method with the exec() function

What is the best way to verify the presence of # in a URL?

Searching for the desktop location using Node.js

Highlighting DOM elements that have recently been modified in Angular

Step-by-step guide on importing popper.js

Can React-Select be utilized in the browser directly from the CDN?

Switch out fontawesome icons for SVG icons

Creating HTML tags using Kotlin

How to use Vue.js to automatically redirect to a URL when a button is clicked

"Facing an issue with my handleChange function not getting triggered in MaterialUI. Can anyone

Is there a way to use an Angular expression inside an HTML document to determine if a variable is a boolean type?

Using moment.js to perform addition of time does not yield the desired outcome

What methods can be used to replicate a network delay while conducting unit tests for an AngularJS controller?

Utilize a single JavaScript script to handle numerous HTML forms within the same webpage

Converting the OpenCV GetPerspectiveTransform Matrix to a CSS Matrix: A Step-by-Step Guide

Maintain the tab count in AngularJs navigation

center a horizontal line using StyledSheets in your project