AngularJS: default option not being selected in dropdown menus

Question

AngularJS: default option not being selected in dropdown menus

I need assistance with a dropdown list issue. See the code snippet below:

My Controller

(function(angular) {
  'use strict';
angular.module('ngrepeatSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     model: null,
     availableOptions: [
       {id: '1', name: 'Option A'},
       {id: '2', name: 'Option B'},
       {id: '3', name: 'Option C'}
     ]
    };

    $scope.data.model=1;

 }]);
})(window.angular);

My UI

<body ng-app="ngrepeatSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="repeatSelect"> Repeat select: </label>
    <select name="repeatSelect" id="repeatSelect" ng-model="data.model">
      <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
    </select>
  </form>
  <hr>
  <tt>model = {{data.model}}</tt><br/>
</div>
</body>

Check out this demo. Despite setting $scope.data.model to 1, the dropdown list appears blank.

I've attempted various solutions without success. Any help is appreciated. Thank you and excuse my language skills.

Edit Note : I previously tried following this guide, but the issue persists.

javascript angularjs dropdown

Answer 1

Answer №1

Your object IDs are string while your data.model is number.

Update your data type to be consistent and it will function correctly.

(function(angular) {
  'use strict';
angular.module('ngrepeatSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     model: null,
     availableOptions: [
       {id: '1', name: 'Option A'},
       {id: '2', name: 'Option B'},
       {id: '3', name: 'Option C'}
     ]
    };
    
    $scope.data.model='1';
    
 }]);
})(window.angular);

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <title>Example - example-select-ngrepeat-production</title>
  

  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="app.js"></script>
  

  
</head>
<body ng-app="ngrepeatSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="repeatSelect"> Repeat select: </label>
    <select name="repeatSelect" id="repeatSelect" ng-model="data.model">
      <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
    </select>
  </form>
  <hr>
  <tt>model = {{data.model}}</tt><br/>
</div>
</body>
</html>

Refer to the example on AngularJS official documentation

https://i.stack.imgur.com/MOlcn.png

Answer 2

Your object IDs are string while your data.model is number.

Update your data type to be consistent and it will function correctly.

(function(angular) {
  'use strict';
angular.module('ngrepeatSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     model: null,
     availableOptions: [
       {id: '1', name: 'Option A'},
       {id: '2', name: 'Option B'},
       {id: '3', name: 'Option C'}
     ]
    };
    
    $scope.data.model='1';
    
 }]);
})(window.angular);

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <title>Example - example-select-ngrepeat-production</title>
  

  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="app.js"></script>
  

  
</head>
<body ng-app="ngrepeatSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="repeatSelect"> Repeat select: </label>
    <select name="repeatSelect" id="repeatSelect" ng-model="data.model">
      <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
    </select>
  </form>
  <hr>
  <tt>model = {{data.model}}</tt><br/>
</div>
</body>
</html>

Refer to the example on AngularJS official documentation

https://i.stack.imgur.com/MOlcn.png

Answer 3

Answer №2

Modify the select value using ng-value directive

<select name="repeatSelect" id="repeatSelect" ng-model="data.model">
  <option ng-repeat="choice in data.availableOptions" ng-value="{{choice.id}}">{{choice.name}}</option>
</select>

Check out the updated Plunker here

Answer 4

Modify the select value using ng-value directive

<select name="repeatSelect" id="repeatSelect" ng-model="data.model">
  <option ng-repeat="choice in data.availableOptions" ng-value="{{choice.id}}">{{choice.name}}</option>
</select>

Check out the updated Plunker here

Answer 5

Answer №3

It is highly recommended in angular to utilize ng-options instead of ng-repeat for select dropdowns. To set a default selection, the ng-model value must be assigned in the controller as the option object itself, ensuring that the data type matches exactly.

For example:

$scope.data.model = $scope.data.availableOptions[0];

Here is an functional illustration responding to your query.

(function (angular) {
    'use strict';
    angular.module('ngrepeatSelect', [])
        .controller('ExampleController', ['$scope', function ($scope) {
            $scope.data = {
                model: null,
                availableOptions: [{id: '1', name: 'Option A'},
                    {id: '2',name: 'Option B'},
                    {id: '3',name: 'Option C'}]
            };

            $scope.data.model = $scope.data.availableOptions[0];

    }]);
})(window.angular);

<body ng-app="ngrepeatSelect">
    <div ng-controller="ExampleController">
        <form name="myForm">
            <label for="repeatSelect"> Repeat select: </label>
            <select name="repeatSelect" id="repeatSelect" ng-model="data.model" ng-options="option.name for option in data.availableOptions track by option.id">
            </select>
        </form>
        <hr>
        <tt>model = {{data.model}}</tt>
        <br/>
    </div>
</body>

Answer 6

It is highly recommended in angular to utilize ng-options instead of ng-repeat for select dropdowns. To set a default selection, the ng-model value must be assigned in the controller as the option object itself, ensuring that the data type matches exactly.

For example:

$scope.data.model = $scope.data.availableOptions[0];

Here is an functional illustration responding to your query.

(function (angular) {
    'use strict';
    angular.module('ngrepeatSelect', [])
        .controller('ExampleController', ['$scope', function ($scope) {
            $scope.data = {
                model: null,
                availableOptions: [{id: '1', name: 'Option A'},
                    {id: '2',name: 'Option B'},
                    {id: '3',name: 'Option C'}]
            };

            $scope.data.model = $scope.data.availableOptions[0];

    }]);
})(window.angular);

<body ng-app="ngrepeatSelect">
    <div ng-controller="ExampleController">
        <form name="myForm">
            <label for="repeatSelect"> Repeat select: </label>
            <select name="repeatSelect" id="repeatSelect" ng-model="data.model" ng-options="option.name for option in data.availableOptions track by option.id">
            </select>
        </form>
        <hr>
        <tt>model = {{data.model}}</tt>
        <br/>
    </div>
</body>

Answer 7

Answer №4

<select name="repeatSelect" id="repeatSelect" ng-model="data.model" ng-options="option.name for option in  data.availableOptions track by option.id" ></select>

To learn more, visit: https://docs.angularjs.org/api/ng/directive/ngOptions

If you wish to choose an option:

$scope.data.model= $scope.data.availableOptions[1]; // 1 ==> desired option index

Alternatively, you can select based on a specific property of the object

  angular.forEach($scope.data.availableOptions, function (option, index) {
                        if (option.id === 1) { // 1 ==> desired option's id
                            $scope.data.model= option;
                        }
                    });

Answer 8

<select name="repeatSelect" id="repeatSelect" ng-model="data.model" ng-options="option.name for option in  data.availableOptions track by option.id" ></select>

To learn more, visit: https://docs.angularjs.org/api/ng/directive/ngOptions

If you wish to choose an option:

$scope.data.model= $scope.data.availableOptions[1]; // 1 ==> desired option index

Alternatively, you can select based on a specific property of the object

  angular.forEach($scope.data.availableOptions, function (option, index) {
                        if (option.id === 1) { // 1 ==> desired option's id
                            $scope.data.model= option;
                        }
                    });

AngularJS: default option not being selected in dropdown menus

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Incorporating a hyperlink into a ReactJS object's value

AngularJS directive encounters an error when trying to read the property 'childNodes' of undefined, resulting in a TypeError

Working with a Mix of Properties in Styled Components

Select a date from the JQuery calendar, verify it against the database, and display any events scheduled for that date

What is the best approach for manipulating live data in localStorage using ReactJS?

Using form submission to implement reCAPTCHA v3 in g-recaptcha

Issue with ui.router not functioning correctly with dual views

Displaying an image gradually as the user moves down the page

Navigate to a fresh web page without encountering any script loading issues

Encountering issues when attempting to insert information into PostgreSql utilizing AngularJs paired with a C# WebService backend

Javascript - Transforming tabular information into a hierarchical tree structure (JSON)

Ways to boost memory capacity in nodejs

How I am able to access this.state in React without the need for binding or arrow functions

The selection element is unresponsive to clicks when the ng-click attribute is present in the parent element

Using jQuery to append an <option> element to a <select> tag

Discover the method of connecting to a unique JavaScript trigger while utilizing IJavaScriptExecutor

Retaining the Chosen Tab upon Page Reload in Bootstrap 5.1

Position the text alongside the thumbnail rather than in the center

Configuring headless unit testing with requirejs

Error in NVD3 causing charts to be inaccurately rendered