issue with ng-selected in AngularJS not functioning

Question

issue with ng-selected in AngularJS not functioning

<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>

My dayOfMonth ng-model is set to 12, but the default value selection based on dayOfMonth is consistently choosing the last index instead.

The getTotalDays function, shown below, simply generates an array containing 28 items.

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

javascript angularjs

Answer 1

Answer №1

make this a replacement:

<select ng-model="dayOfMonth">
   <option value="" label="Choose 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>

replace it using ng-options https://docs.angularjs.org/api/ng/directive/ngOptions

similar to the following:

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="Choose day"></option>
    </select>
  </div>
</div>

Answer 2

make this a replacement:

<select ng-model="dayOfMonth">
   <option value="" label="Choose 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>

replace it using ng-options https://docs.angularjs.org/api/ng/directive/ngOptions

similar to the following:

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="Choose day"></option>
    </select>
  </div>
</div>

Answer 3

Answer №2

Using ng-selected is not necessary because the correct option in your <select> will automatically be set by ng-model. One potential problem you might have encountered is if you set dayOfMonth = 12 as an integer, while the option values are all strings. The code snippet below demonstrates how to make it work, although the | ordinal filter had to be removed as the relevant code was not provided.

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>

Answer 4

Using ng-selected is not necessary because the correct option in your <select> will automatically be set by ng-model. One potential problem you might have encountered is if you set dayOfMonth = 12 as an integer, while the option values are all strings. The code snippet below demonstrates how to make it work, although the | ordinal filter had to be removed as the relevant code was not provided.

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>

issue with ng-selected in AngularJS not functioning

Answer №1

Answer №2

Similar questions

Utilize AngularJS to sort data based on specific columns

Achieving asynchronous results in the parent function with TypeScript: a guide

Error: The jQuery Class is returning an undefined value

Integrating component names into a tag in React

Modify the scope parameter within the service

Guide to verifying current data using the jQuery validation library combined with CodeIgniter 4 in the presence of automatic CSRF protection

Should you stick with pre-defined styles or switch to dynamic inline style changes?

Combining Ionic 3 with epubJS

Displaying JSON as a table using React JS

Is there a way for my Symfony2 bundle to utilize web services from a separate bundle?

What is the best way to use jQuery to toggle the visibility of a <panel>?

Using Gmail with Nodemailer is throwing an error: "Cannot add property 'mailer' on a string with value 'SMTP'."

Using AngularJS ui-router ui-sref results in the error message "Uncaught TypeError: Cannot read property '0' of undefined."

Interactive ajax and php dropdown menu

Invoke a method of a child component within the parent component using Angular 1.5

assigned to a variable and accessed in a different route

I am experiencing difficulty in passing parameters to nested navigators

The issue with Three.Js Raycasting arises when attempting to change camera transformations within an Object3D parent element

Importing a file using its absolute path in JavaScript

Is there a way for me to conceal my table upon clicking on the sidebar? Additionally, when I click on a button to display a different table, can the currently visible table automatically close?