CODEWITHSUNDEEP
angularjs
mitra p
mitra p

Reputation: 440

set a default value for the dropdown

This is my Java script code

$scope.dateSelection = { 1: 'Today' , 2: 'Yesterday' ,3: 'Last 7 days', 4: 'Last business week (Mon - Fri)' ,   5: 'Last week (Sun - Sat)' , 6: 'This month' ,  7: 'Last month' , 8: 'All time' , 9: 'CUSTOM_DATE',10: 'This week (Sun - Today)',11: 'This week (Mon - Today)' , 12: 'Last week (Sun - Sat)' };

This is my HTML code 

<select ng-options="key as value for (key,value) in dateSelection track by key" ng-change="getPerformanceData(indexValue)" ng-model="indexValue" >
            </select>

I want to set a default value is "3: 'Last 7 days'" for the dropdown.

Upvotes: 4

Views: 1006

Answers (5)

Cosmin Ababei
Cosmin Ababei

Reputation: 7072

You can also achieve the desired effect just by changing the HTML template.

<select 
    ng-init="indexValue = '3'"
    ng-options="key as value for (key,value) in dateSelection" 
    ng-model="indexValue" 
    ng-change="getPerformanceData(indexValue)">
</select>

You'll notice that I've removed the track by expression as it's mostly meant to help Angular internally with array sorting - and this is what was causing your problems as you're using an object and not an array.

I've also set the default value in the HTML template, but this can also be done in your controller, it's just a matter of preference.

Upvotes: 1

mitra p
mitra p

Reputation: 440

I tried this, this is also working

Live Example on JsFiddle

$scope.indexValue = "3";
    $scope.dateSelection = { 1: 'Today', 
 2: 'Yesterday', 
 3: 'Last 7 days',
 4: 'Last business week (Mon - Fri)',
 5: 'Last week (Sun - Sat)',
 6: 'This month',
 7: 'Last month',
 8: 'All time', 
 9: 'CUSTOM_DATE', 
 10: 'This week (Sun - Today)', 
 11: 'This week (Mon - Today)',
 12: 'Last week (Sun - Sat)' };

I html file

    <select class="form-control" ng-model="indexValue" ng-change="getPerformanceData(indexValue)">
                <option ng-repeat="(key, value) in dateSelection track by key" ng-selected="{{key == indexValue}}" value="{{key}}">{{value}}</option>
            </select>

In there without customize our string

Upvotes: 2

Deadpool
Deadpool

Reputation: 8240

See the following example: 

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
    <select ng-model="person">
        <option ng-repeat="x in people">{{x.name}}</option>
    </select>
    <script>
        //Module declaration
        var app = angular.module('myApp',[]);
        //controller declaration
        app.controller('myCtrl', function($scope){
            $scope.people = [{name:"Peter"},{name:"Julie"},{name:"Roger"}]; 
            $scope.person = "Julie";
        });
    </script>
</body> 
</html>

Hope it solves your problem!

Upvotes: 0

dpaul1994
dpaul1994

Reputation: 320

Try like this:

<select ng-options="key as value for (key,value) in dateSelection track by key" ng-init="key[2]" ng-change="getPerformanceData(indexValue)" ng-model="indexValue" >
            </select>

Using ng-init in your html select tag, will set a default option

UPDATE

I made an example in plnkr. Check this: plunker

Upvotes: 0

Stepan Kasyanenko
Stepan Kasyanenko

Reputation: 3186

If you can customize your object to the keys would be string, then you can initialize by setting value in the controller.

Live example on jsfiddle.

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {
    $scope.indexValue = "2";
    $scope.dateSelection = {
      1: 'Today',
      "2": 'Yesterday',
      "3": 'Last 7 days',
      4: 'Last business week (Mon - Fri)',
      5: 'Last week (Sun - Sat)',
      6: 'This month',
      7: 'Last month',
      8: 'All time',
      9: 'CUSTOM_DATE',
      10: 'This week (Sun - Today)',
      11: 'This week (Mon - Today)',
      12: 'Last week (Sun - Sat)'
    };
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">

    <select ng-options="key as value for (key,value) in dateSelection" ng-model="indexValue">
    </select>
    {{indexValue}}

  </div>
</div>

Upvotes: 2

Related Questions