CODEWITHSUNDEEP
javascriptangularjsjsonhtml-select
Prashanth Harish
Prashanth Harish

Reputation: 178

How to set default value to select option in Angular JS

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

{{ x.community_Type }}

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 ."
}

Upvotes: 0

Views: 271

Answers (5)

Rohìt Jíndal
Rohìt Jíndal

Reputation: 27192

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>

Upvotes: 0

Vikas Hire
Vikas Hire

Reputation: 628

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>

Upvotes: 0

sravanthi
sravanthi

Reputation: 175

$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

Upvotes: 0

Geethu Jose
Geethu Jose

Reputation: 1993

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>

Upvotes: 2

Sajal
Sajal

Reputation: 4401

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>

Upvotes: 0

Related Questions