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...)
3 answers
solution1
1 ACCPTED 2017-05-09 05:58:12
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.
solution2
1 2017-05-09 12:20:10
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>
solution3
0 2017-05-09 06:13:00
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.