Fernando Fradegrada Fernando Fradegrada - 2 months ago 16
Ajax Question

AngularJS - Empty option in select with ajax source

I have a select element that should be filled with some options that I need to retrieve from an API call, then set the first one as selected.

But Angular creates an empty option at first position and I don't know how to delete it.

Here's my code:

HTML

<select class="form-control" ng-model="selectedPositionFamily">
<option ng-repeat="pf in positionFamilies" ng-value="pf.uuid">{{pf.name}}</option>
</select>


Controller

function Controller($scope, PositionFamilyService) {

$scope.positionFamilies = [];

$scope.selectedPositionFamily = "";

initController();

function initController() {

PositionFamilyService.getAll({ 'sort' : 'order,asc' })
.then(function(data){
$scope.positionFamilies = data.content;
$scope.selectedPositionFamily = $scope.positionFamilies[0].uuid;
});
}
}

Answer

Same thing can be achieved using ng-options

html

<select ng-model="selectedPositionFamily" 
ng-options="pf.uuid as pf.name for pf in positionFamilies"></select>

js

$scope.positionFamilies = [{uuid:1, name:"val1"},
{uuid:2, name:"val2"},{uuid:3, name:"val3"}];
$scope.selectedPositionFamily = $scope.positionFamilies[0].uuid;

https://jsfiddle.net/mxno5esv/