CODEWITHSUNDEEP
javascriptangularjsdropdown
Training at Manorama
Training at Manorama

Reputation: 167

Default Option not selected dropdown in angularjs

I am struggling with dropdown list, Please refer bellow code

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>

Here is an demo, In this demo i am setting $scope.data.model as 1 , then why my Dropdown list showing blank ..

I had searched and tried lot, but no luck, Please help. Thanks in advance, and sorry for my bad English.

Edit Note : I had tried this before, But still facing this issue.

Upvotes: 0

Views: 984

Answers (4)

Prasad De Silva
Prasad De Silva

Reputation: 836

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

More info: https://docs.angularjs.org/api/ng/directive/ngOptions

If you want to select an option:

$scope.data.model= $scope.data.availableOptions[1]; // 1 ==> index of the option you want to select

or select using a property of the object

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

Upvotes: 1

Nitheesh
Nitheesh

Reputation: 19986

The best practice in angular ng-repeat is using ng-options for select. In order to make default selection, we need to assign ng-model value in the controller as the option object itself. i.e, the data type of the ng-model and the repeating option must be the same as exact.

Let us assign it as 

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

Here is an working example of your question.

(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>

Upvotes: 1

NTP
NTP

Reputation: 4448

change value in your select with ng-value

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

Updated Plunker

Upvotes: 1

Zooly
Zooly

Reputation: 4787

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

Uniform your data type and it will work.

(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>

See example on AngularJS official documentation

Select predefined option

Upvotes: 1

Related Questions