AngularJS - 下拉列表不保留所选值答案

【问题标题】：AngularJS - A dropdown is not retaining the selected valuesAngularJS - 下拉列表不保留所选值
【发布时间】：2016-12-10 10:32:39
【问题描述】：

在我的 AngularJS 网络应用程序中，

Plunker：https://plnkr.co/edit/x9uIx5Inkxxt3fqttkkK?p=preview

我的一个下拉菜单（第一个）没有保留所选值。 html代码片段如下。

我知道这与映射有关 ng-model="entityPropertyType.propertyId"

entityPropertyType 是列表中的迭代值。

HTML

        <div class="form-group" ng-repeat="entityPropertyType in advancedSearch.entityPropertyTypes" >

        <label class="control-label col-md-1">Business Card</label>
        <div class="col-md-2">
            <select class="form-control" ng-model="entityPropertyType.propertyId" 
                ng-change="businessCardSelected($index, entityPropertyType.propertyId)" >
                <option value="">Please select</option>
                <option ng-repeat="property in businessCards" value="{{property.propertyId}}">{{property.propertyLabel}}</option>
            </select>
        </div>


    </div>

【问题讨论】：

可能相关：stackoverflow.com/questions/26211573/…

标签： javascript angularjs

【解决方案1】：

您永远不应该使用 ngRepeat 来呈现选择选项。使用ngOptions 指令：

<select class="form-control" 
        ng-options="property.propertyId as property.propertyLabel for property in businessCards"
        ng-model="entityPropertyType.propertyId" 
        ng-change="businessCardSelected($index, entityPropertyType.propertyId)">
    <option value="">Please select</option>
</select>

演示： https://plnkr.co/edit/v6KbJSkqu5XNz2LUfbrK?p=preview

【讨论】：