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
It is kind of a workaround but works like a charm. Just add
<option value="" style="display: none"></option>
as a filler. Like in:Another method to resolve is by making use of:
$first
inng-repeat
Usage:
References:
ngSelected : https://docs.angularjs.org/api/ng/directive/ngSelected
$first : https://docs.angularjs.org/api/ng/directive/ngRepeat
Cheers
There are multiple ways like -
Or
Change your code like this. You forget about the value inside option. Before you assign the ng-model. It must have a value. Only then it doesn't get the undefined value.
JS
Also check whether you have any falsy value or not. Angularjs will insert an empty option if you do have falsy value. I struggled for 2 days just due to falsy value. I hope it will be helpful for someone.
I had options as [0, 1] and initially I was set the model to 0 due to that it was inserted empty option. Workaround for this was ["0" , "1"].
Here is an updated fiddle: http://jsfiddle.net/UKySp/
You needed to set your initial model value to the actual object:
And update your select to look like this: