Transfer the chosen language from the uib-dropdown language selector to the $scope variable

Here is a HTML template that allows the user to select a language:

 <div class="btn-group" uib-dropdown>
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" uib-dropdown-toggle>
                        <span class="lang-sm lang-lbl-full" lang="en"></span><span class="caret logincaret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu" uib-dropdown-menu >
                        <li><span class="lang-sm lang-lbl-full" lang="hu"></span></li>
                        <li><span class="lang-sm lang-lbl-full" lang="ru"></span></li>                        
                    </ul>
                </div>

Is there a way to bind the selected option's "lang" attribute to the $scope of the controller?

UPDATE:

You can see the desired result here

javascriptangularjsangular-ui-bootstrapangular-ui

Answer №1

If you're looking to simplify the selection process, using a basic select element would be ideal:

<select class="form-control" ng-model="selected" ng-options="o as o for o in ['hu', 'ru']"></select>

This way, your model ($scope.selected) is bound correctly and the process is much more streamlined.

Typically, dropdowns are best used for actions, acting like a menu, rather than for directly binding selected values.

Alternatively, if you prefer to stick with the dropdown approach, you'll need to handle value updates manually (perhaps by using ng-click on dropdown actions).

You could set it up like this:

<div class="btn-group uib-dropdown">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" uib-dropdown-toggle>
    <span class="lang-sm lang-lbl-full" lang="{{selected}}"></span> <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" uib-dropdown-menu >
    <li ng-repeat="lang in ['hu','ru']" ng-click="selected = lang"><span class="lang-sm lang-lbl-full" lang="{{lang}}"></span></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

Guide on invoking the callback function using the class name specified in a different JavaScript file

After attempting to invoke the callback function using a classname defined in another JavaScript file, I encountered difficulties and was unable to make the call successfully. Despite my efforts, I couldn't pinpoint the mistake I made. Kindly review t ...

javascriptjqueryajax

Utilizing exclusively GET requests with API communication - whether through $http or $ $resource

When it comes to making basic GET requests from an API without full CRUD operations, the question arises - is it better to use $http or $resource? It is noted that $resource utilizes $http in its implementation, leading some to wonder if using $resource m ...

angularjsangular-resourceangular-http

What causes one CSS file's properties to be inherited by another CSS file in a React application?

I'm puzzled as to why my hero section file seems to be adopting the styling from the navbar CSS file. I do understand that the index.css file sets properties for the entire app, but in my case, I have separate CSS files for different components instea ...

javascripthtmlcssreactjs

Default modal overlay closure malfunctioning; encountering errors when manually managed through jQuery

A custom overlay has been designed and implemented. <div class="overlay modal" id="11"> <div class="background-overlay"></div> <div class="description"> <div class="hidden-xs"> <img src=' ...

javascriptjqueryhtmlcsstwitter-bootstrap

Update the state in the componentDidMount lifecycle method

Embarking on a project using React to hone my skills, but encountered an error while trying to populate an array with data from a JSON file in the ComponentDidMount() hook. It seems this issue stemmed from a previous error: cannot read property 0 of undef ...

javascriptreactjsfrontend

Endless loop issue in Reactjs encountered when utilizing React Hooks

Delving into React Hooks as a newcomer, I encountered an error that has me stumped. The console points to an infinite loop in the code but I can't pinpoint the exact line responsible. Too many re-renders. React limits the number of renders to prevent ...

javascriptreactjsreact-hooks

Struggling to make the DataTables.net Bootstrap 5 example function properly

I'm currently working on familiarizing myself with the styling example for Datatables.net using Bootstrap 5, which can be found at https://datatables.net/examples/styling/bootstrap5.html. I've followed the code provided in the example closely, bu ...

javascripthtmlbootstrap-5

The performance of the animation on http://responsive-nav.com/ becomes erratic when viewed on Android devices

Recently, I came across a fantastic plugin that works perfectly on regular computer browsers. However, when I tested it on my android phone, the css3 animation for the dropdown appeared choppy and seemed to be dropping frames. Does anyone have suggestions ...

javascriptcssplugins

bespoke filter designed to conceal any negative figures

I am trying to implement a feature where a text box will display nothing if the ng-model contains a negative value. I want the ng-model to remain unchanged while ensuring that negative values are not displayed. I am looking for a custom filter to achieve t ...

javascripthtmlangularjs

What is the optimal directory layout and architecture for AngularJS within your project?

I am embarking on a new extensive project using larvel5 and angularjs. I would appreciate some suggestions on the most effective directory structure for organizing AngularJS code within my projects. How should we manage modules, controllers, directive, a ...

angularjs

Invoke a class method once the Promise has been successfully resolved

I'm facing an issue with my simple class class A{ constructor(){ this.loadComponents().then(function(values) {callbackOnLoad();}); } callbackOnLoad(){ //do some things } loadComponents(){ ... return Promise.all([p1,p2,p3,p4,p ...

javascriptes6-promise

I am experiencing issues with md-no-focus-style not functioning correctly in my configuration

I have a button that triggers the opening of my navigation bar: https://i.sstatic.net/nMr0i.jpg When I click on it, a hitmarker appears: https://i.sstatic.net/OLQaE.jpg The issue is that even after clicking on a navigation item and transitioning to the ...

htmlcssangularjsangular-material

Injecting services into AngularJS controllers helps to provide the necessary dependencies

Greetings! Here is the code snippet for my service: angular.module('lucho1App').factory('ApiExample', ['$http', '$q', function($http, $q) { return { promiseToHaveData: function() { return $ht ...

javascriptangularjsangular-promise

Encountering an error while trying to load a CSS file in a React project using webpack due

I'm currently working on a React project that utilizes styled components, and I've been attempting to integrate a CSS file as part of the react-image-gallery package. Following the instructions provided, I included the css-loader and style-loade ...

javascriptcssreactjswebpack

Modifying URLs with backbone.js

When it comes to my Backbone module, I typically access it via the URL: http://localhost/src/index.html#test_module However, there is another module that I need to view which can be accessed using the URL: http://localhost/src/index.html#test_module ...

javascriptbackbone.js

Tips for keeping notification icons in the upper right corner of the box?

I am facing an issue with absolute positioning where the notification icons I've positioned to the top-right corner of a box are moving away when the screen size changes. Desired appearance of the image Actual appearance when screen size is adjusted ...

javascriptcssreactjsstyled-components

Issue with javascript code not functioning post axios request

When working on my project, I utilize axios for handling Ajax requests. I crafted a script that attaches a listener to all links and then leverages Axios to make the Ajax request. Following the Ajax request, I aim to execute some post-processing steps. Aft ...

javascriptphpajaxrequestaxios

Assign the textbox's value to be the earliest selected date from the datepicker

Can anyone assist me? I have a working code that activates only the specific day of the week I want on the datepicker. However, the textbox doesn't have a default value and I would like it to display the first date activated in the datepicker. In th ...

javascriptjqueryjquery-ui

javascript The unchecking of a checkbox is not functioning

I am facing an issue with this JavaScript code. The problem is that when I uncheck a value, it removes all the values from the result instead of removing just the specific unchecked value. Can someone please help me with this? <script> window.addE ...

javascriptjqueryhtmlcheckbox

Create an array mapping of locations and convert each location to its corresponding language

With Next.js, I have successfully retrieved the current locale and all available locales for a language selection menu: const {currentLocale, availableLocales} = useContext(LangContext); // currentLocale = "en-US" // availableLocales = ["en- ...

javascriptnext.jsinternationalization