Having trouble displaying the selection menu when using Angular Strap?

//test.js 

const dropdownMenu = document.querySelector('.dropdown-menu');
dropdownMenu.addEventListener('click', (event) => {
  alert(`You clicked on ${event.target.textContent}`);
});

// index.html

<div class="dropdown">
  <button class="btn btn-primary" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Click to toggle popover
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Volvo</a>
    <a class="dropdown-item" href="#">Saab</a>
    <a class="dropdown-item" href="#">Mercedes</a>
    <a class="dropdown-item" href="#">Audi</a>
  </div>
</div>

I am able to get the button to show the menu, but I need help with making alerts pop up when selecting an item from the menu. Can someone assist me with this? Thank you!

Appreciate any assistance provided.

javascriptangularjstwitter-bootstrapangularjs-directiveangular-strap

Answer №1

Utilize the uib-popover-html attribute by following the example provided below.

<html ng-app="demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.4.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="PopoverDemoCtrl">
    <h4>Dynamic</h4>
    <button uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" popover-placement="right" class="btn btn-default">Popover With Template</button>
  
  <button uib-popover-html="htmlPopover" popover-title="Choose" popover-placement="right" class="btn btn-default">HTML Popover</button>

    <script type="text/ng-template" id="myPopove.html">
        <div>{{dynamicPopover.content}}</div>
        <div class="form-group">
          <select class="form-control"><option value = "volvo"> Volvo </option> <option value = "saab"> Saab </option> <option value = "mercedes"> Mercedes </option> <option value = "audi" > Audi </option> </select>
        </div>
    </script>
   
</div>
     <script>angular.module('demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('demo').controller('PopoverDemoCtrl', function ($scope, $sce) {
  $scope.htmlPopover = $sce.trustAsHtml('<select class="form-control"><option value = "volvo"> Volvo </option> <option value = "saab"> Saab </option> <option value = "mercedes"> Mercedes </option> <option value = "audi" > Audi </option> </select>');
  $scope.dynamicPopover = {
    content: 'Choose car',
    templateUrl: 'myPopove.html',
    title: 'Car list'
  };  
  
});</script>
  </body>
</html>

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

The chosen selection automatically deactivates the checkbox with a matching value

I am looking for a solution where selecting an option will automatically disable the checkbox with the corresponding value. The existing methods I have come across are static and rely on hardcoded values. <select name="pickOne" id="pickOn ...

javascriptjquery

`req.user` seems to be unresolved, but it is actually defined

Currently, I am working on developing an Express.js application that utilizes Passport.js for authentication in an administration panel. The program is functioning correctly at the moment, with my app.js initializing passport and setting up sessions proper ...

javascriptnode.jsexpresspassport.js

What's the reason for the icon not updating in the responsive mode?

I am venturing into the world of responsive web design for the first time. My aim is to create a website menu that drops down when the menu icon is clicked, using the onclick command in JavaScript. However, upon inspecting my browser, I noticed an uncaught ...

javascripthtmlcss

Canvas not displaying image in JavaScript

I have a bird object with a draw function defined, but for some reason, the image is not showing up when called in the render function. Can someone please help me figure out what I'm doing wrong? Thanks in advance. EDIT: Upon further investigation, I ...

javascriptdrawimage

While utilizing Ajax with Spring, it is possible to send a JavaScript object and receive it as a custom object. However, there was an issue with

One of my challenges in Java is working with a custom class that looks like this: public class AddressesVO { private Long addressId; private String address; public Long getAddressId() { return addressId; } public void setAddressId(Long addressId ...

javascriptajaxspringjspspring-mvc

How can you efficiently update another ng-model value based on a select input in AngularJS using ng-change?

<select data-ng-init="selectedItem='previewWidth = 1920; previewHeight = 1080'" data-ng-model="selectedItem" data-ng-change="GetNewData(); {{selectedItem}}"> <option value="previewWidth = 1920; previe ...

javascripthtmlangularjstwitter-bootstrap

"Unlocking the Potential: Maximizing the Benefits of the top.gg Vote Web

My bot has been verified on top.gg, and I'm looking to offer rewards to users who vote for my bot. How can I detect when someone votes for my bot, get their ID, check if it's the weekend, and take action after the vote? Essentially, how do I util ...

javascriptnode.jsexpressdiscord.js

Having trouble invoking an established route within a different route in an Express JS project

While working with an Express JS application connected to a mySQL database, I encountered an issue when trying to fetch data from a pre-defined route/query: // customers.model.js CUSTOMERS.getAll = (result) => { let query = "SELECT * FROM custo ...

javascriptnode.jsexpress

Utilizing a nested interface in Typescript allows for creating more complex and

My current interface is structured like this: export interface Foo { data?: Foo; bar?: boolean; } Depending on the scenario, data is used as foo.data.bar or foo.bar. However, when implementing the above interface, I encounter the error message: Prope ...

javascripttypescript

Incorporating middleware to handle 404 errors in Express

scenario app.use("/api/tobaccos", tobaccos); app.use(function(err, req, res, next) { console.error(err.message); }); API details: router.get("/:id", async (req, res) => { console.log("GET TOBACCO:" + req.params.id); ...

javascriptnode.jsexpressmiddleware

The resume button is failing to activate any functions

I recently encountered an issue with a JS file that is associated with a Wordpress Plugin, specifically a Quiz plugin featuring a timer. I successfully added a Pause and resume button to the quiz, which effectively pauses and resumes the timer. However, I ...

javascriptjquerytimer

Implement a fadeout effect by using a timeout function that adds a class to the div element in

I implemented a loader on my webpage that animates for 3 seconds before a function kicks in to modify the styles and make it invisible. I am looking to add a fadeout effect when the 'waa' style is applied to the 'load' div. setTimeou ...

javascripthtmlcss

Issue with HighCharts: Bar columns not extending to the x-Axis when drilling up

I am encountering an issue with HighChart/HighStock that I need help with. To illustrate my problem, I have set up a JSFiddle. The problem arises when a user drills down on a bar column, causing the y-axis to shrink and consequently making the x-axis appea ...

javascriptjqueryhighcharts

Populate an AngularJS select dropdown with JSON data and automatically pre-select the specified value

I am currently dealing with 2 entities: project and project_types. Each project can have one or multiple project_types associated with it. Using ajax (ng-init), I am retrieving the project data (including its related project_types) and all available proje ...

javascriptangularjsjson

Tips for creating seamless image transitions using a toggle button

My transition effect is working smoothly, but I am having trouble setting it up for the image. How can I resolve this issue? I attempted the following: var lightsOff = document.querySelector("#lights-off"); var lightsOn = document.querySelector("#lights-o ...

javascripthtmlcsscss-transitions

Which nodejs versions are compatible with async Iterators?

Which iterations of nodejs are compatible with async Iterators? Can it be adapted to function on previous versions of nodejs? usage for await (let content of promises) { // promises => array of promise objects console.log(content); } ...

javascriptnode.js

Troubleshooting issues with Firebase integration in a Node.js environment

I am currently encountering difficulties implementing Firebase in my Node.js project. Below is the code snippet that I am attempting to execute on Node. var firebase = require("firebase"); var admin = require("firebase-admin"); var serviceAccount = requi ...

javascriptnode.jsfirebase

Exploring Mixed Type Arrays Initialization in Typescript using Class-Transformer Library

In my class, I have a property member that is of type array. Each item in the array can be of various types such as MetaViewDatalinked or MetaViewContainer, as shown below class MetaViewContainer{ children: (MetaViewDatalinked | MetaViewContainer)[]; ...

javascriptarraystypescriptclass-transformer

Encountered a permission denial error (101) while attempting to upload a file to an SFTP server using SSH2 in

Encountering a permission denied error when attempting to upload a file to an SFTP server, whereas the same operation succeeds when using FileZilla. const UploadFiletoFTP = () => { let Client = require('ssh2').Client; var connSetti ...

javascriptnode.jssftpssh2

Struggling to retrieve a response from the ListUsers endpoint in OKTA using the okta-sdk-nodejs Client's listUsers function

Code snippet: async fetchUsersByEmail(email) { try { return await Promise.all([ oktaClient.listUsers({ search: email, }), ]).then((response) => { console.log(response); }); } catch (error) { ...

javascriptnode.jsoktaokta-api