Set default selected value in select DropDownList in AngularJS

Last Reply 29 days ago By dharmendr

Posted 29 days ago

Hi,

I have one dropdown

currently my requirement is that i need to select by default 'All' value after loading of page

Could you please help me

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.controller('MyController', ['$scope', '$http', function ($scope, $http, $window) {
            GetItems();
            function GetItems() {
                $scope.Items = [];
                $http({
                    method: 'Get',
                    url: '/Home/GetReport/'
                }).success(function (data, status, headers, config) {
                    $scope.Items = data;
                    // Adding All option.
                    $scope.Items.splice(0, 0, { Id: 0, Name: 'All' });
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            } 
        } ]);
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div class="form-horizontal">
        <div class="form-group">
            <label for="ID" class="control-label col-xs-2">
                Item</label>
            <div class="col-md-2">
                <select style="display: inline" data-ng-model="Item" class="form-control" data-ng-options="p.Id as p.Name for p in Items">
                    <option value="">-- Select Item --</option>
                </select>
            </div>
        </div>
    </div>
    <div>   
    </div>
</body>
</html>

 

 

You are viewing reply posted by: dharmendr 29 days ago.
Posted 29 days ago

Hi mahesh213,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.controller('MyController', ['$scope', '$http', function ($scope, $http, $timeout) {
            GetItems();
            // Setting default item.
            $scope.Item = 0;
            function GetItems() {
                $scope.Items = [{ Id: 1, Name: 'Name 1' },
                                { Id: 2, Name: 'Name 2' },
                                { Id: 3, Name: 'Name 3' },
                                { Id: 4, Name: 'Name 4' },
                                { Id: 5, Name: 'Name 5'}];
                // Adding All option.
                $scope.Items.splice(0, 0, { Id: 0, Name: 'All' });
            }
        } ]);
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div class="form-horizontal">
        <div class="form-group">
            <label for="ID" class="control-label col-xs-2">Item</label>
            <div class="col-md-2">
                <select style="display: inline" data-ng-model="Item" class="form-control" data-ng-options="p.Id as p.Name for p in Items">
                    <option value="">-- Select Item --</option>
                </select>
            </div>
        </div>
    </div>
    <div>
    </div>
</body>
</html>

Demo