Choose a value from a dropdown menu in Angular

Currently, I am developing an angularjs application and encountering difficulties setting the selected value in a select tag.

Please note that the 2nd option has the selected="selected"

I have tried various solutions such as setting the doc type to HTML5, adding autocomplete=off, and giving a name to the form tag. However, none of these methods seem to be working. Do you have any suggestions on how to accomplish this?

You can view the code snippet here: https://jsfiddle.net/20cw7eqe/ where it works perfectly.

Unfortunately, it does not work on Firefox or Chrome. It is worth mentioning that I am using Bootstrap as well.

Any alternative solutions that you could recommend?

javascriptangularjstwitter-bootstrap-3angular-ui-bootstrap

Answer №1

Check out this sample here: http://plnkr.co/edit/Xc8Qrcr0AN4I2U0chbye?p=preview

You'll find 2 examples of the select tag for different models. Choose the one that best fits your scenario.

In your controller, simply assign the value you want to be selected. The ng-model will handle the rest.

I've made some changes to the plunker so you can see how ng-selected functions. Here's the code snippet I added:

<select required="true" ng-model="selected3">
    <option ng-repeat="option in options2" ng-selected="option == 'second'" >{{option}}</option>
</select>

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

Retrieve the jQuery widget instance by selecting an element within the widget

I am currently developing a widget using the Jquery widget factory. The abbreviated version of the code looks something like this: _create: function(){ this.element.hide(); //hides original input element this.newInput=$("<input>"); //creates ...

javascriptjquery

Unable to convert JavaScript object to C# through deserialization

In order to pass a model from the controller action to the view, I included a list of objects and converted it into a JavaScript object to facilitate displaying markers on Google Maps. My goal is to send the selected object (selected marker) back to the co ...

javascriptajaxasp.net-mvc

Changing JSON Array Item with JQuery

For a while now, I have been attempting to retrieve a JSON file and modify a value within the array (in order to pass it to PHP) The code I am currently using is j1 = $.getJSON("data.json") j1.responseJSON[name].job = "Carpenter" After executing consol ...

javascriptjqueryjson

Display a button only when hovering over it

Seeking assistance for a simple task that is eluding me at the moment. I am currently using scss and trying to make a button only appear when hovered over. The button is hidden in the code snippet below, nested within a block alongside some svgs. Any hel ...

javascripthtmlangularsass

The process of triggering an action after three mouse clicks

I'm fairly new to coding and I'm currently trying to solve a problem where a div should disappear after being clicked three times. I've managed to achieve this for one or two clicks, but getting it to work for three clicks is proving to be a ...

javascriptjqueryclickjquery-events

The Highcharts Angular Chart fails to update after the renderer.button event is triggered

Within the chart interface, you'll find two unique buttons designed to facilitate the updating of the series and redrawing of the chart based on user preference. One allows for toggling views by percentage, while the other does so by count. When the c ...

javascriptangularhighchartsangular-highcharts

Scroll through a particular HTML element using jQuery animation

Can an object be animated from one position to another following a specific path? For instance, if moving from pos1 to pos2, and encountering a div with the class "no-ok" in the way, the object should avoid it and find the nearest div named OK either to th ...

javascriptjqueryjquery-animate

Utilizing Javascript for logging into Facebook

Feeling frustrated! I've been struggling to implement the Facebook Login pop-up on my website using the Facebook JavaScript API. Despite following tutorials, I can't seem to make the login pop-up appear. Instead, when I go through the login pro ...

javascriptphpfacebookfacebook-graph-apiauthentication

What could be causing React to throw an invalid hook error when using useRoutes?

I encountered an error while attempting to add a new route to my project. import React from "react"; import News from "./NewsComponents/News"; import Photos from "./PhotosComponents/Photos"; import Contact from "./Contact"; import Home from "./Home"; ...

javascriptreactjsreact-hooks

How can we dynamically include ng-click or ng-dblclick in AngularJS based on conditions?

Below is an example of HTML code that I have: <div ng-style="{'height' : myHeight +'px'}" ng-dblclick="myCtrl.clickme()"></div> Is there a way to dynamically add either ng-click or ng-dblclick attributes to the DOM based o ...

angularjshtmldom

Developing HTML5 animation by utilizing sprite sheets

Struggling to create an engaging canvas animation with the image provided in the link below. Please take a look at https://i.stack.imgur.com/Pv2sI.jpg I'm attempting to run this sprite sheet image for a normal animation, but unfortunately, I seem to ...

javascripthtmlcsscanvas

Mastering the manipulation of complex nested objects within React state

Welcome, fellow developers! I am a junior developer currently working on a project that involves a large nested object structure (see example below). I am looking for the best approach to use this as a React state that can be accessed from multiple compon ...

javascriptreactjstypescriptreact-reduxreact-hooks

Expanding your knowledge of AngularJS: utilizing ng-click to interact with elements

After a user clicks on an element in my app, I have some logic that runs. For example: html <h3 ng-click="showAlert('text')">this is text! (try to click and select)</h3> js $scope.showAlert = function(text) { console.log(' ...

javascriptjqueryhtmlangularjs

Challenges Encountered with Random Image Generator in JavaScript

I am encountering an issue with a script that is supposed to change the default images to a random image each time the page is refreshed. However, I keep receiving an error stating that boxID is null. Why is boxID null? <script type="text/javascript" ...

javascripthtml

Alter the language settings of the Datepicker feature in Material Angular 4

Need help changing the language of Datepicker in Material Angular. Struggling to locate this information in the Angular material 2 documentation. Check out this plunkr https://plnkr.co/edit/unzlijtsHf3CPW4oL7bl?p=preview <md-input-container> < ...

javascriptangulardatetypescriptangular-material2

AJAX using PHP returns an object containing null values

As a beginner in ajax programming, I encountered a small issue. I created a function in jQuery that makes an ajax call to a PHP file, which then retrieves information about a player from the database. However, when the PHP file responds to the ajax functio ...

javascriptphpjquerymysqlajax

The padding of elements changes accordingly as the dimensions (width/height) of the header are adjusted

Currently, I'm tackling the challenges of working on my website and trying to understand JavaScript better. I am facing an issue where I want my aside menu's padding to adjust when my header shrinks in height. Furthermore, at the end of the web ...

javascriptjquerycssjquery-animateanimate.css

Guide on sending the name of a JSON file to a JavaScript function when a button is clicked

My dilemma currently involves a JavaScript file that generates HTML content based on the data stored in JSON files. In my "Resources" folder, I have a collection of JSON files along with an HTML file containing various buttons. To illustrate, consider the ...

javascripthtmljson

Issue with Typescript Application not navigating into the node_modules directory

After attempting to load the app from the root directory of our server, it became clear that this was not a practical solution due to the way our application uses pretty URLs. For instance, trying to access a page with a URL like http://www.website.com/mod ...

javascripttypescriptangular

What is the best way to incorporate Javascript into jQuery tabs?

On my website, I have implemented a Jquery and CSS tab system similar to the one found here. Each tab contains a Facebook feed box, a Twitter widget, and a ranking widget for my blog. However, when these widgets are placed within the tab content area, they ...

javascriptjquery