CODEWITHSUNDEEP
angularjsselect
user1260928
user1260928

Reputation: 3429

angularjs : can't auto-select an option in select tag when opening html page

I m displaying an array of years (2014,2015,2016,2017) with the select tag. I want 2014 to be selected when my page is displayed.

html :

<select ng-model="search.year" ng-options="year for year in years" null-is-undefined ng-selected="search.year">
    <option value=""></option>
</select>

controller :

budgetApp.controller('BudgetController', ['$scope', 'resolvedBudget', 'Budget', '$log',
function ($scope, resolvedBudget, Budget, $log) {
     $scope.years = [2012,2013,2014,2015,2016,2017];
     $scope.search.year = '2014'
     {blablabla}
    }]);

When running the app, it says that $scope.search.year is undefined, i dont know why.

Upvotes: 0

Views: 387

Answers (2)

Merlin
Merlin

Reputation: 4917

As said in the comments remove ng-selected which is for OPTIONS see ng-selected Doc

WORKING FIDDLE

html

<div ng-app='App'>
    <div ng-controller="BudgetController">
        <select ng-model="search.year" null-is-undefined ng-options="year for year in years" >
        </select>
    </div>
</div>

Controller

var budgetApp = angular.module('App', []);

budgetApp.controller('BudgetController', ['$scope', function ($scope) { 
     $scope.years = [2012,2013,2014,2015,2016,2017];
     $scope.search = {year:2013};
}]);

Upvotes: 2

Issam Zoli
Issam Zoli

Reputation: 2774

Here is a solution http://jsbin.com/juxebewu/7/

<html ng-app='App'>
    <body>

    <div ng-controller="BudgetController">
        <select ng-model="search.year" ng-options="year as year for year in years" ng-init="search.year=2014">
        </select>
    </div>

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

  </body>
</html>

Js:

var budgetApp = angular.module('App', []);


budgetApp.controller('BudgetController', ['$scope', function ($scope) {
     $scope.years = [2012,2013,2014,2015,2016,2017];
}]);

Upvotes: 1

Related Questions