Remove Blank option from Select Option with AngularJS

by

For reference : Why does angularjs include an empty option in select?

The empty option is generated when a value referenced by ng-model doesn’t exist in a set of options passed to ng-options. This happens to prevent accidental model selection: AngularJS can see that the initial model is either undefined or not in the set of options and don’t want to decide model value on its own.

In short: the empty option means that no valid model is selected (by valid I mean: from the set of options). You need to select a valid model value to get rid of this empty option.

Change your code like this

var MyApp=angular.module('MyApp1',[])
MyApp.controller('MyController', function($scope) {
  $scope.feed = {};

  //Configuration
  $scope.feed.configs = [
    {'name': 'Config 1',
     'value': 'config1'},
    {'name': 'Config 2',
     'value': 'config2'},
    {'name': 'Config 3',
     'value': 'config3'}
  ];
  //Setting first option as selected in configuration select
  $scope.feed.config = $scope.feed.configs[0].value;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="MyApp1">
  <div ng-controller="MyController">
    <input type="text" ng-model="feed.name" placeholder="Name" />
    <!-- <select ng-model="feed.config">
<option ng-repeat="template in configs">{{template.name}}</option>
</select> -->
    <select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
    </select>
  </div>
</div>

Working JSFiddle Demo

UPDATE (Dec 31, 2015)

If You don’t want to set a default value and want to remove blank option,

<select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
      <option value="" selected="selected">Choose</option>
</select>

And in JS no need to initialize value.

$scope.feed.config = $scope.feed.configs[0].value;

More Related Contents:

  1. Angular adds strange options into select element when setting model value
  2. AngularJS performs an OPTIONS HTTP request for a cross-origin resource
  3. htaccess redirect for Angular routes
  4. AngularJS. How to call controller function from outside of controller component
  5. When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?
  6. Dynamic validation and name in a form with AngularJS
  7. How do I inject a controller into another controller in AngularJS
  8. How to use $http promise response outside success handler
  9. AngularJS ng-style with a conditional expression
  10. Rendering directives within $sce.trustAsHtml
  11. How to allow only a number (digits and decimal point) to be typed in an input?
  12. Angularjs Normal Links with html5Mode
  13. How to send csrf_token() inside AngularJS form using Laravel API?
  14. Using ui-router with Bootstrap-ui modal
  15. ng-change get new value and original value
  16. AngularJS watch DOM change
  17. How do I apply an AngularJS directive based on a class set by ng-class?
  18. Why ng-transclude’s scope is not a child of its directive’s scope – if the directive has an isolated scope?
  19. Bind Angularjs to newly created html element dynamically
  20. Recommended way of getting data from the server
  21. Angular JS break ForEach
  22. Why is using if(!$scope.$$phase) $scope.$apply() an anti-pattern?
  23. What’s the meaning of require: ‘ngModel’?
  24. How to config routeProvider and locationProvider in angularJS?
  25. Angularjs: a Service that serves multiple $resource urls / data sources?
  26. Validation not triggered when data binding a number input’s min / max attributes
  27. How to set the value attribute for select options?
  28. AngularJS: How to nest applications within an angular app
  29. Get the current browser name in Protractor test
  30. How do I filter an array with AngularJS and use a property of the filtered object as the ng-model attribute?

Leave a Comment