I've been experimenting with adding a dropdown class, but I'm feeling a bit lost on where to start. Here's a snippet of code that shows what I'd like to do to add a dropdown menu:
<span
id="dropdown-info"
ng-init= "myVar='images/info_icon_off.png'"
ng-mouseover="myVar='images/info_icon_on.png'"
ng-mouseout="myVar='images/info_icon_off.png'"
ng-click="doSomething()">
<img class="info-icon" ng-src="{{myVar}}" alt="Information" width="10" height="10">
</span>
If you're utilizing Bootstrap, then you have the capability to use ng-repeat with li elements to dynamically load a list.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="dropdown">
<img src="https://c1.iggcdn.com/indiegogo-media-prod-cld/image/upload/c_limit,w_620/v1456219661/avvcx99jxynsu2svk9po.png" class=" dropdown-toggle" data-toggle="dropdown" />
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>If you want to enhance your code, consider placing your span into a directive. In the link function, you can dynamically add the drop-down under the image using Angular's jqLite. Alternatively, if the structure of the dropdown is fixed and only its data changes, hiding it with ng-if and populating its options through a variable could be a better approach.
<span
id="dropdown-info"
ng-init= "myVar='images/info_icon_off.png'"
ng-mouseover="myVar='images/info_icon_on.png'"
ng-mouseout="myVar='images/info_icon_off.png'"
ng-click="doSomething()">
<img class="info-icon" ng-src="{{myVar}}" alt="Information" width="10" height="10">
<select ng-if="showDropDown" ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
</span>
Next, in your JS file:
var app = angular.module('app', []);
app.controller('TestController', ['$scope',
function($scope) {
$scope.showDropDown = false;
$scope.doSomething = function() {
$scope.showDropDown = true;
}
$scope.items = [{
id: 1,
label: 'aLabel',
subItem: { name: 'aSubItem' }
}, {
id: 2,
label: 'bLabel',
subItem: { name: 'bSubItem' }
}];
}
]);
This method works well without a directive but may not be suitable for multiple spans. If you have multiple spans, consider using a directive and applying similar logic using scope:{}.
Check out this live demo:
Please be aware that if you are using Angular version 7, the ClickOutside directive should be included in the 'declarations' section of your @NgModule.
Working with AngularJS, I have a collection of colors that each have a specific title and type. These colors are displayed in a list format on the webpage. Now, I am looking to enhance this by incorporating a menu option that allows users to filter and vi ...
I've encountered an issue with form input value injection using a <script> and POST requests. When I attempt to create another form with the same input field (same name and id), the value injection doesn't work, and troubleshooting has bee ...
I'm currently working on a Laravel/Vue3 project and ran into an issue. When I try to execute "npm run dev", I encounter 37 error messages. I suspect it has something to do with the mix or webpack configuration, but being unfamiliar with this area, I&a ...
Currently, I am sending a JSON object back to a JavaScript array. The data in the array is correct (I verified this using Firebug's console.debug() feature), but when I try to access the data within the array, it shows as undefined. Below is the func ...
I am encountering difficulties with the prefers-color-scheme feature and the logic I am attempting to implement. Specifically, I have a toggle on my website that allows users to override their preferred color scheme (black or light mode). However, I am fac ...
When I maximize the browser, everything aligns perfectly as planned. However, resizing the window causes my divs to overlap. Despite trying several similar posts on this issue without success, I have decided to share my own code. CODE: $(document).read ...
As a newcomer to React, I am facing an issue in my CRUD application. I have a Main component and in the List Component, I need to fetch data from the server using an API call. The problem arises when I submit a new item in the Create component - I have to ...
I utilized grunt along with usemin to merge and compress the following code: <!-- build:js /assets/vendor.js --> <script src="../public/bower_components/angular/angular.min.js"></script> <script src="../public/bower_components/angular ...
My current setup involves using Formik validation to disable a button if the validation schema is not met, specifically for a phone number input where typing alphabets results in the button being disabled. However, I encountered an issue where initially, ...
Trying to insert a red * at the end of my input field using bootstrap, but all my attempts so far have been unsuccessful. Is there a way to align the Currently experiencing this issue: https://i.stack.imgur.com/61pzb.png Code snippet: .required-after ...
Currently, I am working through the AngularJS-UI tutorial and have hit a roadblock right at the beginning. I am attempting to implement a basic tooltip feature, all necessary JS files have been included but an error is being thrown by the angularJS-ui mod ...
Currently, I've integrated the MUI library into my React Js application. In this project, I'm utilizing the controlled Text Field component to establish a basic search user interface. However, an unexpected issue has surfaced. Following a chang ...
Below is the code snippet for embedding a tradingview chart. The script loads the imported tradingview function on page load, and I've included a function to reload the dashboard programmatically onClick event. import Script from "next/script&quo ...
Working on a small Angular 5 project, I have a simple component that represents a food product shown below: [![enter image description here][1]][1] This component is nested within my main component. When this component is clicked, a quantity component/m ...
I am currently working on an angularjs directive that creates a multi-select dropdown with a complex template. The directives have isolated scopes and there is a variable called open in the dropdown that toggles its visibility based on clicks. Currently, t ...
When working with VueJs, I have found that I can easily access the data of the current route. However, I have encountered a situation where I need to access the data of a different route by its name. Let's say I have defined the following routes: [ ...
I'm having an issue with my chart where the function is being displayed instead of the actual value. How can I make sure the return value of the function is displayed instead? The temperature values are showing up correctly. Additionally, the \n ...
Is there a way to output compiled babel files in the same directory as the source files? Currently, my script generates the compiled files in a separate folder while maintaining the folder structure. This is achieved through the following code snippet in m ...
Currently, I am working on developing an application that demands the capability to upload large files. After much consideration, I have opted to utilize the FormData object as it allows me to provide progress updates to the user. Sadly, Internet Explorer ...
The following code aims to: 1) iterate through the two arrays, 2) if an item exists in both arrays, add its value to the value of the matching item in the first array, 3) if the item is found in arr2 but not in arr1, add the item to arr1. The code funct ...