Setting the default value for a select element in AngularJS without using ng-options

Question

Setting the default value for a select element in AngularJS without using ng-options

My select element has a classic design

<select class="form-control" id="gender">
    <option value="Male">Male</option>
    <option value="Female">Female</option>
</select>

I want to automatically set the selected value based on the variable from the scope {{profile.gender}}. If the variable is Female, I want the option with that value to be selected. The challenge here is that my options don't have gender values, only strings, so I will need to match them accordingly. Is there an easy way to achieve this?

javascript angularjs select

Answer 1

Answer №1

The reason why you are not able to see the options is because Angular replaces the standard select with its own ng-options version of select.

If you want to include a male/female option, you can simply use a predefined list in ng-options:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
    <select ng-model="profile.gender" ng-options="gender for gender in ['male', 'female']">
    </select>
  Gender: {{profile.gender}}

Answer 2

The reason why you are not able to see the options is because Angular replaces the standard select with its own ng-options version of select.

If you want to include a male/female option, you can simply use a predefined list in ng-options:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
    <select ng-model="profile.gender" ng-options="gender for gender in ['male', 'female']">
    </select>
  Gender: {{profile.gender}}

Setting the default value for a select element in AngularJS without using ng-options

Answer №1

Similar questions

When there is an expensive calculation following a Vue virtual DOM update, the update may not be

Exploring Robotic Arm Actions using three.js

Image upload functionality in Firebase storage is not functioning properly

Extract data from dynamically loaded tables using PhantomJS and Selenium Webdriver

Updating all the direct components within the corresponding category with jQuery

Node - Elasticsearch index initialized without any documents

Load images in the background prior to displaying them

Utilizing VueJs @error handler for managing broken image links

Making a standard AJAX request using jQuery without including the XHR header

Smoothly transition between the new and existing child elements in a React component with a

Using jQuery and Perl to create a dynamic progress bar that is based on the current state of a "pipeline file" and utilizes AJAX

Setting up SSL/TLS certificates with Axios and Nest JS

Is my Node regex parser causing a memory leak?

Leaving the pipeline of route-specific middleware in Express/Node.js

Combining Versioning with BundleConfig.cs: A Comprehensive Guide

How can I handle a 404 error if an object is not found in a JSON file?

Create a dynamic HTML table in React by leveraging arrays

The ngOnInit function is not triggered upon instantiation of an Injectable class

the buttonclick won't pause the timer

Creating an xpath that utilizes an iFrame element sourced from jqueryui.com