Select with Angularjs

Question

In an IONIC/CORDOVA app using anglarjs I found myself with the following problem:

The angular mounts the select leaving an empty option at the beginning. example: JSFIDDKE

When selecting one of the options from the list, this empty option disappears. What I need to do is make sure that it continues to exist even after it’s clicked. Because assuming that the person wants to leave the select empty after selecting, there is no way.

What should be the way to implement this select? Currently it is written this way:

<select class="select_local" name="local" ng-model="formData.local">
            <option ng-repeat="local in locals" value="{{local.id}}">{{local.name[lang]}}</option>
          </select>

Answer 1

Just add an empty option to your arrayof options:

$scope.typeOptions.unshift({name: '', value: ''});

Or, in the case of your example:

$scope.typeOptions = [
  {name: '', value: ''},
  {name: 'Feature', value: 'feature'}, 
  {name: 'Bug', value: 'bug'}, 
  {name: 'Enhancement', value: 'enhancement'}
];

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.typeOptions = [
      {name: '', value: ''},
      {name: 'Feature', value: 'feature'},
      {name: 'Bug', value: 'bug'}, 
      {name: 'Enhancement', value: 'enhancement'}
    ];
    
    $scope.form = {type: $scope.typeOptions[0].value};
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
  <select ng-model='form.type' required ng-options='option.value as option.name for option in typeOptions'></select>
</div>