How to select default drop-down option in select list in Angular JS

Question

I have the following select option :

<select ng-model="class_name" name="class_name" class="form-control">
<option ng-repeat="t in MemberClass" value="{{t}}">{{t.class_name}}</option>
</select>

I want to set default option MemberClass[0] to select option. I tried the following code but not working.

The JSON data is coming from Webservice...

//To fetch Member Class  
  $http.get('http://192.168.1.6:8080/apartment//member/class/list').then(function(response) {
    $scope.MemberClass = response.data.list;
    $scope.class_name = $scope.MemberClass[0]; // Not working
});

Member class JSON data is :

[
    {
        "class_id": 1,
        "class_name": "Owner",
        "class_details": "DCE"
    },      
    {
        "class_id": 7,
        "class_name": "Staff "
    },
    {
        "class_id": 10
        "class_name": "Vendor"
    }
]

Plunker sample : https://plnkr.co/edit/vVcrmOREkcVBBM2Ynhgv?p=preview (Am getting error if I not select any option...)

try ng-options="t as t for t in MemberClass" some time ng-options work well — Jenny
– Jenny, Commented May 9, 2017 at 5:50
give me data of MemerClass or just try : ng-options="t as t.name for t in MemberClass" where name is property you want to display in drp — Jenny
– Jenny, Commented May 9, 2017 at 5:56

tanmay · Accepted Answer · 2017-05-09 05:58:12Z

1

You can utilize ng-options for this. It is the preferred way most of the times. Like this:

<select ng-model="class_name" ng-options="t as t.class_name for t in MemberClass">
</select>

Now, since you have $scope.class_name assigned as default value, it will be selected already.

working example

answered May 9, 2017 at 5:58

tanmay

7,9112 gold badges23 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

tanmay Over a year ago

@PrashanthHarish you are getting entire object.. it's just that my object has only class_name in there..

Prashanth Harish Over a year ago

Am getting error. Am parsing that object as "class0": [JSON.parse($scope.class_name)], Before I initialized $scope.class_name = "{}"; in the beginning....

tanmay Over a year ago

@PrashanthHarish what you can do is have class_name as {} and not string.. so you won't need to JSON.parse it like here

Prashanth Harish Over a year ago

If I not selected any option if I try to submit I get error thats why I used {}..

tanmay Over a year ago

@PrashanthHarish you won't need to have JSON.parse there since selected class_name would already be a JSON. updated plunker

Manikandan Velayutham · Accepted Answer · 2017-05-09 12:20:10Z

Use ng-init. Try like below.

<!DOCTYPE html>
<html ng-app="myApp" ng-controller="Ctrl">
  <body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
     <div class="form-group">
        <label class="control-label col-md-3">Member Class </label>
        <div class="col-md-4">
			  <select ng-model="class_name"
   ng-init=" class_name = MemberClass[0]" name="class_name" ng-options="t as t.sub_class_name for t in MemberClass">					
			  </select>
			 <p>Selected Value: {{class_name}} <p>
		  	</div>
      </div>
	  
	  <button type="submit" ng-click="alertdata()">Save</button>
      
<script>
angular.module('myApp', [])
    .controller('Ctrl', function($scope) {
	
	var MemberClass;
	 $scope.MemberClass = [{
                "sub_class_id": 1,
                "sub_class_name": "Primary"
            },
            {
                "sub_class_id": 2,
                "sub_class_name": "Secondary "
            },
            {
                "sub_class_id": 3,
                "sub_class_name": "Dependent "
            },
            {
                "sub_class_id": 4,
                "sub_class_name": "Sub Member"
            },
            {
                "sub_class_id": 5,
                "sub_class_name": "None"
            }
        ]
	//	$scope.class_name = $scope.MemberClass[0];
		
		
	$scope.alertdata = function() {
		 $scope.class_name = "{}";
        var parameter;        
        parameter = {
            "member": {
                "first_name": "first_name",

                "role": [{
                    "role_id": 4
                }],

                "associated": "associated",

                "class0": [JSON.parse($scope.class_name)],

                "contect": [{
                    "intercom": "intercom"
                }],

                "individualdetails": [{
                    "gender": "gender"
                }]
            },

            "address": [{
                "street_address_1": "street_address_1"
            }]
        }
        console.log(JSON.stringify(parameter));
	};       
    });
</script>
</body>
</html>

Marcus Höglund · Accepted Answer · 2017-05-09 06:13:00Z

0

You should definitly use ng-options for this

<select ng-model="class_name" ng-options="t as t.class_name for t in MemberClass">
</select>

To set a default, either set the $scope.class_name to a value of the MemberClass array or you can add an empty option tag as below which will be selected when the $scope.class_name is null

<select ng-model="class_name" ng-options="t as t.class_name for t in MemberClass">
  <option value="">Select value</option>
</select>

answered May 9, 2017 at 6:13

Marcus Höglund

16.9k11 gold badges53 silver badges72 bronze badges

Collectives™ on Stack Overflow

How to select default drop-down option in select list in Angular JS

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related