Set default value for select in angularjs

Question

I would like to set a default value for a select element:

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
  </head>
  <body ng-app="app">
    <div ng-controller="controller">
      <p>Year: {{ selectedYear }}</p>
      <p>Month: {{ selectedMonth }}</p>

      <select ng-model="selectedYear" ng-options="value for (key, value) in years track by value"></select>      
      <select ng-model="selectedMonth" ng-options="key as value for (key, value) in months track by key"></select>          
    </div>
  </body>
</html>

JavaScript:

angular.module("app", [])
.controller("controller", function($scope){
  $scope.months = ["Jan", "Fev", "Mar", "Abr"];
  $scope.selectedMonth = 0;

  $scope.years = [2015, 2016, 2017];
  $scope.selectedYear = 2015;
})

I've already tried this for month:

$scope.selectedMonth = 0;
$scope.selectedMonth = "Jan";
$scope.selectedMonth = $scope.months[0];

None seems to work. I've written it in codepen too: http://codepen.io/anon/pen/NGPPde?editors=101

Why my month is never selected by default?

Anid Monsur · Accepted Answer · 2015-09-02 23:12:30Z

1

First, you cannot use select as and track by together. See here https://docs.angularjs.org/api/ng/directive/ngOptions

To address your issue, you need to understand that since you are using key as value for (key, value), this causes Angular to treat months as an object. This results in keys being strings, not integers. So make the following two changes:

Make this a string

$scope.selectedMonth = "0";

Remove track by

<select ng-model="selectedMonth" ng-options="key as value for (key, value) in months"></select>

Honestly though, for such a simple data model, it would be easier just to use <option ng-repeat> instead of ng-options.

edited Sep 2, 2015 at 23:12

answered Sep 2, 2015 at 22:53

Anid Monsur

4,5381 gold badge19 silver badges24 bronze badges

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

1 Comment

JB Nizet Over a year ago

ng-options doesn't only work with string values. See my answer for an example.

JB Nizet · Accepted Answer · 2015-09-02 22:56:17Z

The documentation of ngOptions says:

Do not use select as and track by in the same expression. They are not designed to work together.

It also says that the notation for (key, value) is for object data sources, and not for array data sources.

So my guess is that the year preselection kind of works by accident, but that you shouldn't rely on it. Instead, stick to the documented usage. Simply transform you array of month names into an array of objects:

$scope.monthObjects = $scope.months.map(function(monthName, index) {
    return {
        index: index,
        name: monthName
    };
});

and use

ng-options="month.index as month.name for month in monthObjects"

and

$scope.selectedMonth = 0;

Jhey · Accepted Answer · 2015-09-02 22:59:07Z

0

Just needed to update the ng-options directive to

month for month in months

That's of course if you want to keep the selectedMonth variable as a string value of what is shown and not a number value like 0.

Hope that helps you out!

edited Sep 2, 2015 at 22:59

answered Sep 2, 2015 at 22:53

Jhey

1,3777 silver badges10 bronze badges

Collectives™ on Stack Overflow

Set default value for select in angularjs

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related