Select with AngularJS

Question

Select with AngularJS

Navigation

#1 by (2 votes)

2

In an IONIC / CORDOVA app using anglarjs I encountered the following problem:

The angle mounts the select leaving an empty option at startup. example: JSFIDDKE

When selecting one of the options in the list, this empty option disappears. What I need to do is make it exist even after it is clicked. For supposing the person wants to leave the select empty after selecting it, there is no way.

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

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

angularjs ionic

asked by anonymous 23.11.2016 / 04:17

1 answer

How to group an array of objects in javascript (Angular) Error opening MySQL connection via ADODB

score 2 · Accepted Answer

Just add an empty option to your array 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><divng-app="myApp" ng-controller="MyCtrl">
  <select ng-model='form.type' required ng-options='option.value as option.name for option in typeOptions'></select>
</div>