mablevj mablevj - 4 months ago 19
AngularJS Question

How to remove unwanted empty item present at first index for a select list generated by AngularJS?

Here i have two different select list each one fill with an empty item at first index after view created. Preselection is also not working due to the particular issue.

`<h3>Select Age:</h3>
<div class="list">
<label class="item item-input item-select">
<div class="input-label">From</div>
<select ng-model="ageFrom"
ng-options="age for age in Range(18, 75)"
<label class="item item-input item-select">
<div class="input-label">To</div>
ng-options="age for age in Range( ageToStartIndex, 75)"

Here's Fiddle for completed implementation.


If all you want are the following:

  1. Enable start values for both from and to select boxes (currently showing blank)
  2. Upon selecting From, the start index of to should be the value selected in From.

I am not clear when you say "Preselection is also not working due to" the particular issue (do you mean preselection for second dropdown upon choosing first or the preselection of each one of them upon initial page load?)

I think you are trying to do dependent dropdowns whose value you are not able to fix upon change

Even then I am not sure if you would need the extra variable for startIndex, may be.


this JS should do:

        var app=angular.module('App', []);
        function ctrl($scope){

            $scope.ageFrom = 18;
            $scope.ageTo = 18;

            $scope.ageToStartIndex = 18;

            $scope.onAgeFromSelected = function (value) {
            $scope.ageToStartIndex = value;
              $scope.ageTo = value;

            $scope.Range = function (start, end) {
              var result = [];
              for (var i = start; i <= end; i++) {
              return result;

HTML remains the same.

Check the updated fiddle.