Question

<div class=" header-search pull-right">
            <section style="margin-top: 15px" class="col col-6">
                <label class="select">
                    <select style="width: 300px" ng-change="seletedCompanyChanged()"
                            ng-model="selectedCompanyId"
                            ng-options="value.CompanyId as value.Name for value in CompanyTempDDForHeder ">
                        <option value="" ng-selected="{{CompanyTempDDForHeder.Name}}">{{CompanyTempDDForHeder.Name}}</option>
                    </select>
                </label>
            </section>
        </div>

控制器中的鳕鱼

var getCompaniesbyPassingLogin = function (data) {
        $scope.CompanyTempDDForHeder = data;
    }

    globalService.getCompanyDropDownForHeader(getCompaniesbyPassingLogin);

它工作正常，但我想默认选择下拉列表中的第一个值

<option value="" ng-selected="selected">Select Compnay</option>

如何在下拉列表中默认选择动态值？这是我的代码。有可能吗？

Answer 1

selectedCompanyId，ng-model，允许您设置默认选定值。

在你的AngularJS代码中，它应该是这样的：

$scope.selectedCompanyId = "Company A";

来自AngularJS documentations，声明：

select指令与ngModel一起使用，以提供范围与<select>控件之间的数据绑定（包括设置默认值）。

此外，您无需拥有<option>行，因为ng-options（在<select>中）会为您填充下拉列表。

Answer 2

您可以使用ng-init指令设置默认值。所以这样的事情应该有效：

<select style="width: 300px" ng-change="seletedCompanyChanged()"
          ng-model="selectedCompanyId"
          ng-options="value.CompanyId as value.Name for value in CompanyTempDDForHeder"
          ng-init="selectedCompanyId=CompanyTempDDForHeder[0].CompanyId"> 
</select>

请注意，使用ng-options指令时，您不需要<option>元素，因为此指令将为您创建它们。

ng-options默认选择动态选项

2 个答案: