AngularJS Bootstrap Dropdown Module is a versatile tool that allows

Having some trouble implementing a dropdown with AngularJS and Bootstrap. Here is the code I've been working with: I followed a guide, but it seems like it might be outdated. That's the only resource I could find for now.

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8>
    <title>Angular</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <script src=""></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="js/app.js"></script>
</head>
<body ng-controller="dropdown">
<div class="dropdown">
    <button type="button" class="btn btn-danger">Menu</button>
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ng-model="dd.data.multipleSelect">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
    <li ng-repeat="a in subjects"><a ng-click="dropboxitemselected(a)">{{a}}</a><li>
    </li>
    </ul>
 </div> 
</body>
</html>

var app  = angular.module ('app', []);

app.controller('dropdown', function ($scope) {
    $scope.subjects = ['Math', 'Physics', 'Chemistry', 'Hindi', 'English'];
    $scope.selectedItem;
    $scope.dropboxitemselected = function (item) {

        $scope.selectedItem = item;
        alert($scope.selectedItem);
    };

});

Answer №1

The recommended approach for creating a bootstrap dropdown is to ensure that everything is enclosed within a <div class="dropdown"> element. If this step is skipped, the functionality may not work as expected.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

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

How can I convert an object array back into an iterated collection after using the find() method in MongoDB?

Currently, I am working on developing an application using AngularJS, NodeJS, and MongoDB. My goal is to load Products classified by ProductCategoryCode sent from AngularJS to NodeJS. The process involves finding Products based on ProductCategoryCode, iter ...

Display the data right after it is inserted into the MySQL database using the CodeIgniter MVC framework

How can I make the ID of the data that I save in MySQL immediately appear on the page after clicking the save button? The scenario is, there is one text box and one button. When the user fills in the text box and then clicks the button, the data will be sa ...

What is the best way to prevent the chaining of promises and catches in JavaScript?

I am currently developing an API using node and express to create users. However, I find myself struggling with error handling due to the asynchronous nature of MongoDB functions, which makes me feel like I'm trapped in a "promise hell." I anticipate ...

Animating nested ng-repeat loops

Trying to animate a list of elements divided by rows (the parent ng-repeat) and columns (the child ng-repeat) has been quite challenging. While I was able to achieve the desired animation with individual ng-repeats, the same cannot be said for nested ng- ...

Exploring event propagation in React components

Can event bubbling be tested in React? For instance: Class Foo extends React.Component { doSomething() { console.log('bubble'); } render() { return ( <div onClick={this.doSomething}> ...

Use jQuery to ensure that duplicate ids are made unique

My situation involves html files being automatically generated through a process. However, this process results in some div tags having duplicate ids. Is there a method available to modify these ids and make them unique by appending an integer at the end? ...

Difficulty arising from implementing v-if as a filter within a v-for loop in Vue.js

I'm struggling a bit with setting up a conditional statement using v-if along with a loop using v-for in Vue. Here's what I have so far: <div class="row form-group" v-for="(article, key, index) in articles" :key="key" v-if="article.pubdate(fi ...

Global Redirect Pro is a cutting-edge redirection tool that

Check out the code below which successfully edits a link to redirect users to a specific website based on their location. I'm interested in enhancing this code in two ways: $(window).load(function () { $.getJSON('http://api.wipmania.com/json ...

Differences Between JavaScript Binding and Anonymous Functions

I came across this code in the mongoose-deep-populate library async.parallel([ User.create.bind(User, {_id: 1, manager: 2, mainPage: 1}), Comment.create.bind(Comment, {_id: 3, user: 1}), ... ], cb) which utilizes Function.prototype.bind to make ...

A feature to reveal additional content when it extends beyond a single line

<div class="questionnaire-description col-xs-12" id="questionnaire_description_wrapper"> <text-truncate> <span ng-class="questionnaire_description.show_more ? 'full-description' : 'ph-ellips ...

The request method 'PUT' is not currently supported

Currently, I am working on a project that involves springboot, angularjs, and restful services. Here is my REST controller: @RequestMapping(value="/updatestructure/{ch}", method = RequestMethod.PUT) public @ResponseBody Structurenotification updateStruct ...

Step-by-step guide: Uploading files with Ajax in Codeigniter

I am facing an issue with updating data and uploading an image when editing a row in my grid. Although the data is successfully updated, I am encountering difficulties in saving the image file to a folder. Here is what I have tried: While using AJAX, I ...

A powerful combination of Node.js, Angular, and Jade on the client side, complement

Can anyone offer advice or examples on how to structure an app like this effectively? Client (client.company.com) Node.js Angular Jade ExpressJS Server (private) (server.company.com) node.js "rest" api (express) The API is currently private ...

Using Python to load cookies from a .txt file into a Selenium WebDriver for logging into a secure website

I have encountered a roadblock in my application that I need help with. Despite finding similar questions, none of the answers provided have helped me resolve my issue. The main problem I am facing is automating the login process on secure websites and do ...

Discover the offsetTop value of a child element in React using TypeScript

How can I retrieve the offsetTop of React children in Typescript? Here is an example of my component: export default class FadeIn extends Component { private onScroll = () => { React.Children.forEach(this.props.children, child => { // G ...

Manipulating data in textarea using datatables

I am attempting to implement functionality where the clicked row in a datatables is added to a textarea. If the same row is clicked again, the data should be searched in the textarea and removed if found (select/deselect). When I select one row followed b ...

What is the method used to create the scrolling effect on this website?

I am in the process of creating my own personal website and I would like it to function similar to the following example: Instead of the typical scrolling, I'm interested in transitioning between different sections on the page. Could this be achieved ...

The navigation bar in javascript automatically removes the active class once the page has finished loading

I am having an issue with my code where the active class is being removed after a page refresh. Below is the HTML code: <div id="navbar" class="navbar-collapse collapse navbar-right"> <ul class="nav navbar-nav> <li><a href="abo ...

Sign up process through AngularJS

Looking to implement a straightforward registration process using AngularJS. Initially, I retrieve a user with a specific email and assign it to $scope.users. If the method "GetUserByEmail" returns multiple users, I attempt to display a message stating "Us ...

Troubleshooting Issues with Google Analytics Internal Link trackEvent Functionality

Using ga.js, I have encountered an issue with tracking internal links on my website. Despite successfully tracking external links and viewing real-time reports for events, the internal links are not being recorded accurately. While testing pages, the tot ...