First element of dropdown loads blank in AngularJs

Question

First element of dropdown loads blank in AngularJs, when I select from the dropdown, blank element is removed. I want to remove that blank element at the load of the dropdown.

Code:

<select class="form-control" ng-model="myModel" ng-if="c.length==1" id="SRQ" required>
  <option value="-1" selected>[Select One]</option>
  <option value="1">Primary</option>
</select>

<select class="form-control" ng-model="myModel" ng-if="c.length==2" id="SRQ1" ng-change="change(myModel)" required>
  <option value="-1" selected>[Select One]</option>
  <option value="1">Primary</option>
  <option value="2">Secondary</option>
</select>

<select class="form-control" ng-model="myModel" ng-if="c.length==3" id="SRQ2" ng-change="change(myModel)" required>
  <option value="-1" selected>[Select One]</option>
  <option value="1">Primary</option>
  <option value="2">Secondary</option>
  <option value="3">Tertiary</option>
</select>

Please help,

Thanks

@Vanojx1, `ng-init` shouldn't be used unless you're working with `ng-repeat`. — developer033, Nov 25 '16 at 14:40
The `ng-if` directives create child scope. The `ng-model` needs a value which "has a dot". Consider using the `ng-options` directive instead of multiple `ng-if` directives. — georgeawg, Nov 25 '16 at 14:51
Check this answers that respond your question: http://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-select — Jonathan Brizio, Nov 25 '16 at 14:52
For more information on `ng-options`, see [AngularJS ng-options API Reference](https://docs.angularjs.org/api/ng/directive/ngOptions). For more information see this video -- [always have a "dot" in your ng-models](http://www.youtube.com/watch?v=ZhfUv0spHCY&feature=youtu.be&t=30m). See also -- [AngularJS Wiki - Understanding Scopes](https://github.com/angular/angular.js/wiki/Understanding-Scopes) — georgeawg, Nov 25 '16 at 15:02

developer033 · Answer 1 · 2016-11-25T15:29:13.597

I think you can simplify your code using ngOptions directive and to display the items based on a specific variable, you can create a custom filter. Take a look at this example:

(function() {
  'use strict';
  
  angular
    .module('app', [])
    .controller('mainCtrl', mainCtrl)
    .filter('customFilter', customFilter);

  function mainCtrl() {
    var vm = this;
    
    vm.options = [{
      'label': 'Primary',
      'value': '1'
    }, {
      'label': 'Secondary',
      'value': '2'
    }, {
      'label': 'Tertiary',
      'value': '3'
    }];
    vm.maxSize = '1';
    vm.myModel = '';
  }
  
  function customFilter() {
    return function(items, maxSize) {
      if (!items || items.length === 0) return;
      
      return items.slice(0, maxSize);
    }
  }
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0-rc.2/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
</head>

<body ng-controller="mainCtrl as $ctrl">
  <div>No. of options to display:</div>
  <div class="radio text-center" ng-repeat="n in [1, 2, 3]">
    <label>
      <input type="radio" name="item" value="{{n}}" ng-model="$ctrl.maxSize">{{n}}
    </label>
  </div>
  <div>
    <select class="form-control" ng-options="option.value as option.label for option in $ctrl.options | customFilter: $ctrl.maxSize" ng-model="$ctrl.myModel">
      <option value="" hidden>[Select One]</option>
      <option label="{{option.label}}"></option>
    </select>
  </div>
</body>

</html>

As a suggestion I'd recommend you to follow this tutorial.

score 0 · Answer 2 · answered Nov 26 '16 at 19:06

 <select class="form-control" ng-model="myModel" ng-if="c.length==2" id="SRQ1" ng-change="change(myModel)" required> <option value="" ng-hide="!myModel" selected>[Select One]</option>

1.At first [select One] is selected as myModel is [selectOne]

2.As the myModel is assigned the default option will be in hidden mode in dropdown list.

First element of dropdown loads blank in AngularJs

2 Answers2