AngularJS - 使用 ajax 源选择中的空选项答案

【问题标题】：AngularJS - Empty option in select with ajax sourceAngularJS - 使用 ajax 源选择中的空选项
【发布时间】：2016-09-29 19:30:19
【问题描述】：

我有一个选择元素，应该填充一些我需要从 API 调用中检索的选项，然后将第一个选项设置为选中。

但是 Angular 在第一个位置创建了一个空选项，我不知道如何删除它。

这是我的代码：

HTML

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

控制器

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;                        
            });
    }
}

【问题讨论】：

标签： angularjs ajax select scope options

【解决方案1】：

同样的事情可以使用 ng-options 实现

html

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

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

https://jsfiddle.net/mxno5esv/

【讨论】：