angularjsangularjs-select

Remove Blank option from Select Option with AngularJS


I am new to AngularJS. I searched a lot, but it does not solve my problem.

I am getting a blank option for the first time in select box.

Here is my HTML code

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

JS

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

      //Configuration
      $scope.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.configs[0].value;
});

But it doesn't seem to work. How can I get this solved? Here is JSFiddle Demo


Solution

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