Javascript AngularJS-当重新加载时，下拉菜单将空字段显示为所选选项

因此，我在

AngularJS

中有一个下拉列表，当我第一次加载页面时，它选择第一项作为默认项，这是应该的。然后，当我重新加载页面时，默认项现在是一个空字段。当检查web控制台时，我可以看到所选项目有值，但它没有显示在下拉列表中。这怎么可能

HTML：

<div>
    <h4>{{ dropdown.name }}</h4>
    <select class="form-control"
            ng-options="item as item.name for item in dropdown.items"
            ng-change="change(dropdown)"
            ng-model="dropdown.selected"
            ng-init="defaultSelected(dropdown)">
    </select>
</div>

编辑

根据要求，这里是完整的HTML页面及其控制器

<link type="text/css" href="app/modules/functions/dropdown/dropdown.css" rel="stylesheet">

<div class="row dropdown-container" ng-controller="dropdownController">
    <div ng-repeat="dropdown in dropdowns track by $index" ng-include="'dropdown.html'"></div>
</div>
<div class="clearfix"></div>

<!-- Template used for repeating HTML -->
<script type="text/ng-template" id="dropdown.html">
    <div>
        <h4>{{ dropdown.name }}</h4>
        <select class="form-control"
            ng-options="item as item.name for item in dropdown.items"
            ng-change="change(dropdown)"
            ng-model="dropdown.selected"
            ng-init="defaultSelected(dropdown)">
        </select>
    </div>

    <div ng-repeat="dropdown in dropdown.nested track by $index" ng-include="'dropdown.html'"></div>
</script>

{{dropdown.name}

angular.module（'SimPlannerApp'）
.controller（'dropdownController'，函数（$scope，$q，viewService，socketService，Account，storedProcedureService，popService，sharedService）{
console.warn（'load:dropdown.controller.js'）；
setParameters（{qryusr:Account.get（）.login}，'parameters'）；
初始化（）；
$scope.change=函数（下拉列表）{
if（dropdown.nested）{
UpdateStated（下拉菜单）；
}否则{
lastInLine（下拉菜单）；
}
};
$scope.defaultSelected=函数（下拉列表）{
选择设置（下拉）；
返回下拉列表。已选择；
};
功能设置选择（下拉列表）{
console.info（'dropdown.selected:'，dropdown.selected）；
如果（dropdown.selected==未定义）{
dropdown.selected=dropdown.items[0]；
}
返回下拉列表；
};
函数初始化（）{
var masters=$scope.functions.dropdown；//$scope在父控制器中找到。
$scope.dropdowns=[]；
对于（变量i=0；i

这不是ngInit的标准用法。我很惊讶这能奏效

正如文档所述，ngInit指令用于计算当前范围内的表达式。你所做的是调用一个函数，而不是它的目的

这是文件：

您最好完全删除ngInit并简化控制器

下面是一个实时工作示例：

angular.module（'SimPlannerApp'，[]）
.controller（'dropdownController'，函数（$scope）{
$scope.dropdown={}；
$scope.dropdown.items=[{name:'one'}，{name:'two'}]；
$scope.dropdown.name=“dropdown”；
如果（！$scope.dropdown.selected）{
$scope.dropdown.selected=$scope.dropdown.items[0]；
}
});

{{dropdown.name}
您好，我已经制作了一个JSFIDLE示例

我使用init函数为ng模型提供一个默认值

控制器代码段：

 $scope.initialize = function(){
        $scope.dropdown.selected = $scope.dropdown.items[0];//initialize the selected value
   };

   $scope.dropdown = {
   name:'myname',
   items:[{name:'first'},{name:'second'},{name:'third'}],
   selected:null
   };

   $scope.initialize();

   $scope.change = function(){
        console.log('option changed');
   };

希望有帮助，祝你好运。
你可以做：ng init=dropdown.selected=dromdown.items[0]。请注意，如果以异步方式加载项目，这可能不起作用。我不赞成现有的答案，因为它们只是静态代码，要了解代码不起作用的原因，我们需要了解您如何使用下拉控制器以及如何构建您的下拉项fields@Walfrat：没错，我正在异步加载下拉列表。我刚刚添加了完整的HTML和控制器，以便您了解我在做什么。答案很简单：ng init不适用于异步加载。只要在数据准备就绪时以编程方式进行设置即可。这可能是一个争用问题，也可能是因为退出了递归模板，因为它将生成与级别数相同的[select]元素数，并且它们都指向同一个变量：dropdown.selected，并且ng init将为它们中的每一个执行。
angular.module('SimPlannerApp')
.controller('dropdownController', function ($scope, $q, viewService, socketService, Account, storedProcedureService, popService, sharedService) {
    console.warn('LOADING: dropdown.controller.js');
    viewService.setParameters({ qryusr: Account.get().login }, 'parameters');
    initalize();

    $scope.change = function(dropdown){
        if(dropdown.nested){
            updateNested(dropdown);
        } else {
            lastInLine(dropdown);
        }
    };

    $scope.defaultSelected = function(dropdown){
        setSelected(dropdown);

        return dropdown.selected;
    };

    function setSelected(dropdown){
        console.info('dropdown.selected : ', dropdown.selected);

        if(dropdown.selected === undefined){
            dropdown.selected = dropdown.items[0];
        }

        return dropdown;
    };

    function initalize(){
        var masters = $scope.functions.dropdown;    //  $scope found in parent Controller.
        $scope.dropdowns = [];

        for(var i = 0; i < masters.length; i++){
            createDropdown(masters[i], true);
        }
    };

    function lastInLine(dropdown){
        setParams(dropdown);

        setSelected(dropdown);

        viewService.get();
    };

    function updateNested(parent){
        if(parent.nested){
            for(var i = 0; i < parent.nested.length; i++){
                var nested = parent.nested[i];

                setParams(nested, parent);

                createDropdown(nested, false);
            }
        }
    };

    function setParams(dropdown, parent){
        if(dropdown.populate.params){
            var params = dropdown.populate.params;
            for(var key in params){
                var keyValue = sharedService.camelcase(params[key]);

                if((parent) && (parent.selected[keyValue])){
                    viewService.setParameters({ [key]: parent.selected[keyValue] }, 'parameters');
                } else if ((dropdown.selected) && (dropdown.selected[keyValue])){
                    viewService.setParameters({ [key]: dropdown.selected[keyValue] }, 'parameters');
                }
            }
        }
    };

    function createDropdown(dropdown, isMaster){
        var populate = dropdown.populate,
            storedProcedure = storedProcedureService.getParam(populate.storedProcedure),
            view = $scope.view; //  $scope found in parent Controller.

        socketService.connect(storedProcedure.name, storedProcedure.verb, view)
            .then(function(response){
                dropdown.items = setItems(response, populate.itemFieldName);

                setSelected(dropdown);

                setParams(dropdown);

                updateNested(dropdown);

                if(isMaster){
                    $scope.dropdowns.push(dropdown);
                }

                if(dropdown.nested === undefined){
                    lastInLine(dropdown);
                }
            })
            .catch(function(error){
                console.error(error.message, '\ndata : ', error.data);
                popService.set('Connection failed.');
            });
    };

    function setItems(items, fieldName){
        fieldName = sharedService.camelcase(fieldName);
        for(var i = 0; i < items.length; i++){
            items[i].name = items[i][fieldName];
        }
        return items;
    };
});

 $scope.initialize = function(){
        $scope.dropdown.selected = $scope.dropdown.items[0];//initialize the selected value
   };

   $scope.dropdown = {
   name:'myname',
   items:[{name:'first'},{name:'second'},{name:'third'}],
   selected:null
   };

   $scope.initialize();

   $scope.change = function(){
        console.log('option changed');
   };