how to set dropdown default value using angularjs

Question

please refer the below fiddle http://jsfiddle.net/nq1eyj1v/117/

can any one help how to set default option value as "Select" Select on load ?

HTML:

<div ng-app="myApp" ng-controller="MyCtrl">
   <div class="col-xs-12">
      <label class="col-xs-6 control-label">Type:</label>
      <div class="col-xs-6">
         <select name="type" ng-model="payment.type" ng-dropdown required ng-change="changeme()" >
            <option ng-option value="Default">Select</option>
            <option ng-option value="Cash">Cash</option>
            <option ng-option value="Check">Check</option>
            <option ng-option value="Money Order">Money Order</option> 
         </select>
      </div>
   </div>

   <div class="col-xs-12"  ng-if="payment.type == 'Cash'">
     11111111111111
    </div>

    <div class="col-xs-12" ng-if="payment.type == 'Check'">
    22222222222
    </div>

    <div class="col-xs-12"  ng-if="payment.type == 'Money Order'">
     3333333333333
    </div>

</div>

$scope.payment = { type : 'Cash' } this will give you Cash as a default selected value. — gaurav bhavsar
– gaurav bhavsar, Commented Mar 2, 2016 at 9:46
If i set on my controller, bydefault value is loading, but my select option change is not working. that is on change on option ng-if content is not loading. any clue ? — Krish
– Krish, Commented Mar 2, 2016 at 9:51
change you this line <option ng-option value="Default">Select</option> to this <option ng-option value="">Select</option> :p — Akshay Kumar
– Akshay Kumar, Commented Mar 2, 2016 at 10:29

CroMagnon · Accepted Answer · 2020-04-07 09:31:32Z

I've update your JSFiddle here.

I replaced the options using ng-options.

HTML

<div ng-app="myApp" ng-controller="MyCtrl">
    <div class="col-xs-12">
        <label class="col-xs-6 control-label">Type:</label>
            <div class="col-xs-6">
                <select name="type" ng-model="payment"
                    ng-dropdown required 
                    ng-change="changeme()"
                    ng-options="option.type for option in options">
                </select>
            </div>
        </div>

        <div class="col-xs-12"  ng-if="payment.type == 'Cash'">
            11111111111111
        </div>

        <div class="col-xs-12" ng-if="payment.type == 'Check'">
            22222222222
        </div>

        <div class="col-xs-12" ng-if="payment.type == 'Money Order'">
            3333333333333
        </div>
    </div>
</div>

JS

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.options = [
        { type: 'Select' },
        { type: 'Cash' },
        { type: 'Check' },
        { type: 'Money Order' }
    ];

    $scope.payment = $scope.options[0];
}

As you can see, I initialized the $scope.payment.type value as 'Select' by assigning it the first $scope.options value.

fine, but how to we can show different container on change of different value ? The fiddle you updated by default select is getting by the on change showing different div content is not working...!!

Ved · Accepted Answer · 2016-03-02 10:14:39Z

Very easy. Just add empty value inside option.

<option value="">Select</option>

Finally :

 <select name="type" ng-model="payment.type" ng-dropdown required ng-change="changeme()" >
            <option ng-option value="">Select</option>
            <option ng-option value="Cash">Cash</option>
            <option ng-option value="Check">Check</option>
            <option ng-option value="Money Order">Money Order</option> 
         </select>

Updated Fiddle: http://jsfiddle.net/nq1eyj1v/118/

EDIT 1 :

<div ng-app="myApp" ng-controller="MyCtrl">
   <div class="col-xs-12">
      <label class="col-xs-6 control-label">Type:</label>
      <div class="col-xs-6">
         <select name="type" ng-model="payment"  ng-dropdown required ng-change="changeme(payment)" ng-options="option.name for option in options"> 
              <option ng-option value="">Select</option>
         </select>
      </div>
   </div>

   <div class="col-xs-12"  ng-if="payment.name == 'Cash'">
     11111111111111
    </div>

    <div class="col-xs-12" ng-if="payment.name == 'Check'">
    22222222222
    </div>

    <div class="col-xs-12"  ng-if="payment.name == 'Money Order'">
     3333333333333
    </div>

</div>

JS:

var myApp = angular.module('myApp',[]);


function MyCtrl($scope) {
    $scope.options = [
        { name: 'Cash' },
        { name: 'Check' },
        { name: 'Money Order' }
    ];

    $scope.changeme = function (payment) {
       alert(payment.name)
    }

}

FIDDLE: http://jsfiddle.net/nq1eyj1v/121/

i am using ng-options only but how to check the option value in "ng-if" on my div to show or hide ?
If you're satisfied with an answer, don't forget to upvote it, and select it as an answer.

Hassan Tariq · Accepted Answer · 2016-03-02 10:10:28Z

0

function MyCtrl($scope) {

$scope.payment.type="Default";
// payment.type = 'Check' ;
// $scope.changeme = function() {
// alert('here');

 }

Modify your js code by this

answered Mar 2, 2016 at 10:10

Hassan Tariq

7407 silver badges15 bronze badges

Comments

Silverspur · Accepted Answer · 2016-03-02 10:17:12Z

0

You have to set payment.type to "Default" in your controller.

myApp.controller( 'MyCtrl', function( $scope, ...) {
    $scope.payment = ...;
    $scope.payment.type = "Default";
    ...
}

edited Mar 2, 2016 at 10:17

answered Mar 2, 2016 at 9:47

Silverspur

9451 gold badge12 silver badges39 bronze badges

2 Comments

Krish Over a year ago

If i set on my controller, bydefault value is loading, but my select option change is not working. that is on change on option ng-if content is not loading. any clue ?

Silverspur Over a year ago

I've updated your Fiddle and it works : jsfiddle.net/nq1eyj1v/124 You were not using a correct syntax to declare your controller.

Akshay Kumar · Accepted Answer · 2016-03-02 10:31:19Z

0

Just Change Your

<option ng-option value="Default">Select</option>

to

<option ng-option value="">Select</option>

answered Mar 2, 2016 at 10:31

Akshay Kumar

5497 silver badges19 bronze badges

Comments

Tripat Bala Singh · Accepted Answer · 2018-02-23 05:35:36Z

var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope) {
            $scope.payments= [{
                Id: 0,
                Name: 'Select'
            }, {
                Id: 1,
                Name: 'Cash'
            },{
                Id: 2,
                Name: 'Check'
            },{
                Id: 3,
                Name: 'Money Order'
            }];
        });

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
 <div ng-app="MyApp">
<div ng-controller="MyController">

<h2>Using ng-selected with payment id</h2><br>
    <select ng-model="drp">
        <option ng-repeat="payment in payments" value="{{payment.Id}}"
                ng-selected="{{ payment.Id== 0}}">
            {{payment.Name}}
        </option>
    </select>
    <br>
  <h2> Using ng-selected with payment Name</h2><br>
    <select ng-model="drp">
        <option ng-repeat="payment in payments" value="{{payment.Id}}"
                ng-selected="{{ payment.Name== 'Cash'}}">
            {{payment.Name}}
        </option>
    </select> 
</div>
</div>

Uttam Kar · Accepted Answer · 2021-01-11 09:39:49Z

0

Following code set the default value of dropdown

In Html:
<select name="type" ng-model="payment.type" ng-dropdown required >
    <option ng-option value="Default">Select</option>
    <option ng-option value="Cash">Cash</option>
    <option ng-option value="Check">Check</option>
    <option ng-option value="Money Order">Money Order</option> 
 </select>


In angular controller:

$scope.payment.type = 'Default';

answered Jan 11, 2021 at 9:39

Uttam Kar

3133 silver badges11 bronze badges

Collectives™ on Stack Overflow

how to set dropdown default value using angularjs

7 Answers 7

1 Comment

3 Comments

Comments

2 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

3 Comments

Comments

2 Comments

Comments

Comments

Comments

Linked

Related