AngularJS - 如何将占位符文本添加到下拉列表中

Question

我是 angularjs 的新手。我想在下拉列表中添加一个占位符。我不是在硬编码我的下拉值，它来自某个地方。你能告诉我我哪里做错了吗？

<div class="row form-group">
    <label class="col-md-3">Action<span style="color: #b94a48">*</span></b></label>
    <div class="col-lg-3 col-md-7" style="padding: 0px;">
        <div class="dropdown select" style="width: 100%;">
            <select name="wlOrdActType" class="dropdown multiple" placeholder="-- Please Select --" 
                ng-model="wlOrdActType" 
                ng-options="obj.name as obj.name for obj in ordertypeList"
                style="width: 100%;">
                    <option></option>
            </select>
        </div>
    </div>
</div>

在这里，一切都在工作。但是占位符没有放在下拉列表中

Answer 1

<option value="" disabled selected>Please Select</option>

Answer 2

你可以做这样的事情：

<select ng-model="wlOrdActType" ng-options="obj.name as obj.name for obj in ordertypeList">
  <option value="" selected="selected">Choose one</option>
</select>

Answer 3

也可以试试这个：

<select required class="form-control" ng-model="myModel" 
ng-options="item as item.title for item in list">
    <option value="" label="-- Select option --" disabled selected="selected">      
    </option>
</select>

在控制器中将模型设置为空字符串时。

 $scope.myModel = "";

Answer 4

我正在使用Angular v1.6.6。因此，请检查旧版本的兼容性。我相信下面的代码应该适用于 v1.5 以后。

$scope.ordertypeList = ordertypeListFromApiCall; // Get the collection from API
$scope.ordertypeList.splice(0,0, {'id' : '', 'name' : 'Select Order Type...' } );                 
$scope.wlOrdActType = $scope.ordertypeList[0];

在 HTML 中，

<select class="form-control" ng-model="wlOrdActType" required ng-options="ordertype.name disable when ordertype.id == '' for ordertype in ordertypeList track by ordertype.id">
</select>

在 itemSelected 函数中，确保 $scope.wlOrdActType 的 id 不为空