What is the best way to showcase a scope with a dropdown menu?

I'm a beginner in Angular and would appreciate constructive feedback. I am attempting to show specific text based on the option clicked in a dropdown button, but I can't seem to make it work. Can someone point out what's going wrong? Thank you in advance.

JSfiddle

HTML

<div ng-app='myApp'>
<div ng-controller="DropdownCtrl">
    <div class="btn-group" dropdown is-open="status.isopen">
      <button id="single-button" type="button" class="btn btn-default btn-xl" dropdown-toggle ng-disabled="disabled">
        Options <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
        <li role="menuitem"><a href="#/" ng-click="show(first)">Display: First</a></li>
        <li role="menuitem"><a href="#/" ng-click="show(second)">Display: Second</a></li>
      </ul>
    </div>


<div id="separator"></div> 

<div class="col-md-12">
  {{show.first}}
  {{show.second}}
</div>

</div>
</div>

Javascript

var myApp = angular.module('myApp', ['ui.bootstrap']);

myApp.controller('DropdownCtrl', function ($scope) {

  $scope.show = function(scope) {
      $scope.first = 'First';
      $scope.second = 'Second';
  };

});

Answer №1

Take a look at this

Manager

var myApp = angular.module('myApp', ['ui.bootstrap']);
myApp.controller('DropdownCtrl', function ($scope) {
  $scope.displayValue = function(value) {
      console.log(value);
      $scope.selectedData = value;  
  };
});

HTML:

<div ng-app='myApp'>
<div ng-controller="DropdownCtrl">
    <div class="btn-group" dropdown is-open="status.isopen">
      <button id="single-button" type="button" class="btn btn-default btn-xl" dropdown-toggle ng-disabled="disabled">
        Options <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
        <li role="menuitem"><a href="#/" ng-click="displayValue('first')">Display: First</a></li>
        <li role="menuitem"><a href="#/" ng-click="displayValue('second')">Display: Second</a></li>
      </ul>
    </div>  
<div id="separator"></div> 

<div class="col-md-12">
  {{selectedData}}
</div>     
</div>
</div>

Fiddle

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

Managing errors and error codes in React/Redux applications

I am currently exploring the most effective approach for managing errors, particularly when deciding between error codes and an errors object in response from my API. As I dive into building a multi-part form using react, each time a user progresses to th ...

The module 'myapp' with the dependency 'chart.js' could not be loaded due to an uncaught error: [$injector:modulerr]

Just starting out with Angular.JS and looking to create a chart using chart.js I've successfully installed chart.js with npm install angular-chart.js --save .state('index.dashboard', { url: "/dashboard", templateUrl ...

Disabling the click functionality using ng-disabled on an anchor tag is effective, but the tag remains

I'm facing an issue with an anchor tag that I've styled as a download button using Bootstrap's CSS. The problem is even though I have the ng-disabled attribute in the tag, which visually disables the button, it can still be clicked. Here&apo ...

Is Babel necessary for enabling JavaScript compatibility in my TypeScript React project, excluding Create React App?

This is the webpack configuration for my React project built in TypeScript, module.exports = { mode: 'development', entry: ['./src/main.tsx'], module: { rules: [ { // Rule for ts/tsx files only, no rule for js/js ...

How can the plus icon on the left side of an expandable row in Angular UI-Grid be moved to the right side?

I am currently utilizing the expandrow feature in ui-grid, as seen in this demo from the official ui-grid site. Due to my language being RTL (right-to-left), the plus icon is appearing on the right-hand side. For architectural reasons, I require the plus ...

AngularJS: Blocking access to specific state for users

I am currently in the process of developing an application using sails.js for the backend and Angular for the frontend. My goal is to restrict access to the admin control page for unauthorized users. I have come across several solutions, but none of them s ...

Utilizing Vue.js to share a single array of data across two distinct input lists

For a clearer understanding of my requirements, I have put together a demo on JSFiddle: https://jsfiddle.net/silentway/aro5kq7u/3/ The code snippet is presented below: <script src="https://cdn.jsdelivr.net/npm/vue"></script> <div id=" ...

Utilizing React forwardRef with a functional component

Looking at my code, I have defined an interface as follows: export interface INTERFACE1{ name?: string; label?: string; } Additionally, there is a function component implemented like this: export function FUNCTION1({ name, label }: INTERFACE1) { ...

The most effective method for transforming an array into an object in JavaScript using a prefixed value as the key

I am working with an array that contains prefix values ["options_a", "options_b", "options_c", "capable_d", "capable_e_c" ] I am looking for a way to transform this array into an object format with the pre ...

The dropdown menu button stubbornly remains open and refuses to close

Having an issue with a dropdown menu button where it should open when clicked on the icon and close when clicking off the icon or on the icon again, but instead, it remains open. Here is a screenshot for reference: https://i.stack.imgur.com/UX328.jpg I&a ...

The webpage is not displaying any results despite using .innerHTML with Ajax

I am currently developing a web application that displays query results using the Google Books API. While my code is functioning, I am encountering an issue where the .innerHTML method does not show any results on the HTML page. Below is the HTML code bein ...

Personalized Grid Design for Showcasing Athletic Teams

I am looking to create a custom grid layout that represents the team's Players, separated by their positions (GK, Defense, Midfielders, and Forwards), similar to the image below. The layout should also be responsive like in image 1. Currently, the re ...

Request was unsuccessful due to error code 400, which indicated a problem with the given MP4 file in the

I've been working on streaming an mp4 file from my computer. I can successfully upload and delete files, but when I click the link after uploading, all I see is {}. Additionally, I'm getting the following errors: GET http://localhost:8000/read/c9 ...

What is the process for accessing browser API calls through Protractor?

Is there a method to identify if the necessary API has been activated by the browser? Can Protractor provide a list of APIs that have been called? ...

Having trouble retrieving a hidden value in JavaScript when dealing with multiple records in a Coldfusion table

In this table, there is a column that allows users to select a predicted time. <cfoutput query="getReservations"> <tbody> <td><input class="form-control predicted" name="predicted" id="ReservaTempoPrevisto" placeholder= ...

The issue persists with the ajax.reload() function in DataTables

It's been driving me crazy that my datatables table won't refresh, despite using ajax.reload. I've spent weeks on this code but still can't get it to work. DataTablesDraw = (selector, order, pages, file, sort, column, template, data_se ...

combine the expression and string within the ng-model directive

i am encountering an issue with the ng-repeat function below: <span ng-repeat = "x in levels"> <input id="{{x}}" type="checkbox" ng-model="Filter.level.{{x}}" ng-true-value="{{x}}" data-ng-false-value=""/><label for="{{x}}">{{x}}< ...

Refresh HTML with JSON/AJAX

Ever since I discovered JSON for handling AJAX functionality in my rails applications, I've been hooked. Using RJS to render HTML just didn't sit right with me as it felt like it was violating the MVC pattern. My first project that heavily utiliz ...

The expected origin for the sine wave animation is not being met as intended

Experimenting with three.js, I am attempting to create an animation of a sine wave that originates from where a plane is clicked with the mouse. However, there seems to be a discrepancy in the ripple's starting point as it always emanates from the mid ...

The Cross-Origin Resource Sharing request using the PUT method has been denied due to restrictions set by the

I am currently using CORS requests to communicate between my client and server located on different domains. I have configured my Apache HTTP server to use SSL in the following manner: // Utilizing AJAX withCredentials=true (sending cookies, allowing SSL ...