ng-selected not working angularjs

Question

<select ng-model="dayOfMonth">
   <option value="" label="Select day"></option>
   <option ng-selected="parseInt(dayOfMonth) === parseInt(day+1)"  ng-repeat="day in getTotalDays() track by $index" value="{{$index+1}}>{{$index+1 | ordinal}} of the month</option>
</select>

I have an ng-model dayOfMonth whose value i am getting as 12, but when i try to select a default value based on dayOfMonth its always selecting all the last index.

Below is my getTotalDays function which just returns an array of 28 items.

$scope.getTotalDays = function(){
   return new Array(28);
}

@Shane, is there a reason to not use ngOptions (the directive that was made exclusively for <select> tag)? — developer033
– developer033, Commented Aug 11, 2016 at 23:43

WalksAway · Accepted Answer · 2016-08-11 14:08:45Z

replace this:

<select ng-model="dayOfMonth">
   <option value="" label="Select day"></option>
   <option ng-selected="parseInt(dayOfMonth) === parseInt(day+1)"  ng-repeat="day in getTotalDays() track by $index" value="{{$index+1}}>{{$index+1 | ordinal}} of the month</option>
</select>

with ng-options https://docs.angularjs.org/api/ng/directive/ngOptions

like so:

angular.module('myApp', [])
  .controller('myController', ['$scope',
    function($scope) {
      $scope.getTotalDays = [1, 2, 3, 5];
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myController">
    <select ng-model="dayOfMonth" ng-options="day as (day + ' of the month') for day in getTotalDays">
      <option value="" label="Select day"></option>
    </select>
  </div>
</div>

Lex · Accepted Answer · 2016-08-11 14:10:02Z

You don't need to use ng-selected because the proper option in your <select> will be set by ng-model. One possible issue you may have had is if you are setting dayOfMonth = 12 since it is an int, but the option values are all strings. The below snippet works although I had to remove the | ordinal filter since you didn't provide that code.

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.dayOfMonth = '12';
    $scope.getTotalDays = function() {
      return new Array(28);
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <select ng-model="dayOfMonth">
    <option value="" label="Select day"></option>
    <option ng-repeat="day in getTotalDays() track by $index" value="{{$index+1}}">{{$index+1}} of the month</option>
  </select>
</div>

Collectives™ on Stack Overflow

ng-selected not working angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related