How to set default value to select option in Angular JS

Question

I have a select option and have to select default option i.e., option[0] how.?.

I have get methos to receive response from server.

$http.get("http://192.168.1.10:8080/apartment/community/type/list").then(function(response) {
        $scope.myData = response.data.type;
        $scope.log = {community_type_id : $scope.type[0].value}; //Not working
    });

community_Type data is comming from web service as :

    {
    "type": [
        {
            "community_type_id": 19,
            "community_Type": "Religious Institution",
            "community_type_details": "To religious leaders"
        },
        {
            "community_type_id": 20,
            "community_Type": "Religious / Common Interest Group",
            community_type_details": "To religious leaders"
        },
        {
            "community_type_id": 21,
            "community_Type": "Residential Society",
            "community_type_details": "To religious leaders"
        }
    ],
    "status": "success",
    "message": " community type list ."
}

Possible duplicate of AngularJS set default selected option in dropdown and many other similar questions. — cнŝdk
– cнŝdk, Commented May 5, 2017 at 10:07
$scope.log = {community_type_id : $scope.myData[0].community_type_id}; — Fetrarij
– Fetrarij, Commented May 5, 2017 at 10:08

Geethu Jose · Accepted Answer · 2017-05-05 10:11:22Z

2

Try this to show default value as the option[0].

ng-if="false" shows default value as the option[0].

When it is removed the list will show the first item as empty.

function optionController($scope) {
  $scope.myData = [{
    "community_type_id": 19,
    "community_Type": "Religious Institution",
    "community_type_details": "To religious leaders"
  }, {
    "community_type_id": 20,
    "community_Type": "Religious / Common Interest Group",
    "community_type_details": "To religious leaders"
  }, {
    "community_type_id": 21,
    "community_Type": "Residential Society",
    "community_type_details": "To religious leaders"
  }]
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="optionController">
    <select ng-model="log.community_type_id" ng-options="x.community_type_id as x.community_Type for x in myData">
<option value="" ng-if="false">{{ x.community_Type }}</option>
</select>
  </div>
</div>

edited May 5, 2017 at 10:11

answered May 5, 2017 at 10:05

Geethu Jose

1,9932 gold badges16 silver badges31 bronze badges

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

1 Comment

Geethu Jose Over a year ago

@Prashanth Harish, try this one

Sajal · Accepted Answer · 2017-05-05 10:06:13Z

ng-if = "false" does not render a default option.

Do this instead :

var app = angular.module("MyApp", []).controller("MyCtrl", function($scope) { 

$scope.myData =  [
        {
            "community_type_id": 19,
            "community_Type": "Religious Institution",
            "community_type_details": "To religious leaders"
        },
        {
            "community_type_id": 20,
            "community_Type": "Religious / Common Interest Group",
            "community_type_details": "To religious leaders"
        },
        {
            "community_type_id": 21,
            "community_Type": "Residential Society",
            "community_type_details": "To religious leaders"
        }
    ];

 $scope.log = {community_type_id : $scope.myData[0].community_type_id};

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="MyApp" ng-controller="MyCtrl">
<select ng-model="log.community_type_id" ng-options="x.community_type_id as x.community_Type for x in myData">
<option value="">--Select--</option>
</select>
</body>

sravanthi · Accepted Answer · 2017-05-05 10:12:04Z

0

$http.get("http://192.168.1.10:8080/apartment/community/type/list").then(function(response) {
        $scope.myData = response.type;
        $scope.selectedValue=$scope.myData[0].community_Type;

    });

you can iterate myData

<select ng-model="data.community_Type" ng-repeat="data in myData">
<option value="data.community_Type" ng-selected="{data.community_Type == selectedValue }">{{ data.community_Type }}</option>
</select>

Hope this may help

answered May 5, 2017 at 10:12

sravanthi

1751 gold badge2 silver badges15 bronze badges

Comments

Vikas Hire · Accepted Answer · 2017-05-05 10:24:38Z

Select Degree

var app = angular.module("MyApp", []).controller("MyCtrl", function($scope) { 

$scope.myData =  [
        {
            "community_type_id": 19,
            "community_Type": "Religious Institution",
            "community_type_details": "To religious leaders"
        },
        {
            "community_type_id": 20,
            "community_Type": "Religious / Common Interest Group",
            "community_type_details": "To religious leaders"
        },
        {
            "community_type_id": 21,
            "community_Type": "Residential Society",
            "community_type_details": "To religious leaders"
        }
    ];

 $scope.log = {community_type_id : $scope.myData[0].community_type_id};

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="MyApp" ng-controller="MyCtrl">
<select ng-model="log.community_type_id" ng-options="x.community_type_id as x.community_Type for x in myData">

</select>
</body>

Rohìt Jíndal · Accepted Answer · 2017-05-06 08:53:45Z

DEMO

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
    $scope.myData = [
        {
            "community_type_id": 19,
            "community_Type": "Religious Institution",
            "community_type_details": "To religious leaders"
        },
        {
            "community_type_id": 20,
            "community_Type": "Religious / Common Interest Group",
            "community_type_details": "To religious leaders"
        },
        {
            "community_type_id": 21,
            "community_Type": "Residential Society",
            "community_type_details": "To religious leaders"
        }
    ];
    
    $scope.selectedCommunity = $scope.myData[0].community_Type;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="FirstCtrl" ng-app="myapp">
    <select ng-options="item.community_Type as item.community_Type for item in myData"
            ng-model="selectedCommunity"></select>
</div>

Collectives™ on Stack Overflow

How to set default value to select option in Angular JS

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related