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

The most effective method for incorporating a header and footer into an HTML page utilizing a variety of client-side frameworks

Creating a bold portion of a string

Using JQuery to eliminate the current div in an image slider

Issue with jQuery's JSON data not being properly transmitted to CodeIgniter (`

Node.js - CSRF Protection Token Undefined

Place the Div directly above a distinct Div

Can the contents of a JSON file be uploaded using a file upload feature in Angular 6 and read without the need to communicate with an API?

Display data from two arrays in real-time

JavaScript: The Battle of Anonymity - Anonymous Functions vs Helper

What is causing the premature termination of the for loop?

Encountering an Invariant Violation: React does not allow objects to be used as children

I need help using i18N to translate the SELECT option in my VUE3 project. Can someone guide me

Incorporate JavaScript code into contentWindow

Adding an image to a React component in your project

Is the `document.documentElement` consistently defined and always representing the HTML element?

Can anyone recommend a user-friendly JavaScript dialog box compatible with jQuery that is mobile-responsive?

The focus behavior of React refs varies across different browsers such as Chrome, Firefox, and IE

Is there a way to remove information with react and axios?

Removing items dynamically from a list created using ng-repeat

The InjectionToken component is not exported by AngularFire