CODEWITHSUNDEEP
javascripthtmlangularjs
Mable John
Mable John

Reputation: 5258

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

I have two different select list each one fill with an empty item at first index after view created.

`<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-name="page"
         ng-options="age for age in Range(18, 75)" 
         data-tap-disabled="true"
         ng-change="onAgeFromSelected(ageFrom)">
       </select>
       {{ageFrom}}
     </label>
     <label class="item item-input item-select">
       <div class="input-label">To</div>
       <select 
         ng-model="ageTo" 
         ng-name="page" 
         ng-options="age for age in Range( ageToStartIndex, 75)" 
         data-tap-disabled="true">
       </select>
       {{ageTo}}
     </label>
   </div>`

Here's Fiddle for complete implementation.

Upvotes: 2

Views: 63

Answers (2)

Mahesh
Mahesh

Reputation: 1099

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.

Then

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++) {
            result.push(i);
              }
              return result;
            };
        }

HTML remains the same.

Check the updated fiddle.

Upvotes: 2

Jaldhi Oza
Jaldhi Oza

Reputation: 92

Add Following Code :

 <option style="display:none" value="">select a type</option>

Full Code Like :

<div ng-app="App" >
<div ng-controller="ctrl">
<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-name="page"
     ng-options="age for age in Range(18, 75)" 
     data-tap-disabled="true"
     ng-change="onAgeFromSelected(ageFrom)">         
      <option style="display:none" value="">select a type</option>
   </select>
   {{ageFrom}}
   </label>
   <label class="item item-input item-select">
   <div class="input-label">To</div>
   <select 
     ng-model="ageTo" 
     ng-name="page" 
     ng-options="age for age in Range( ageToStartIndex, 75)" 
     data-tap-disabled="true">
       <option style="display:none" value="">select a type</option>
   </select>
   {{ageTo}}
   </label>
   </div>
   </div>       
   </div>

Upvotes: 1

Related Questions