从下拉列表中删除第一个空白项目并替换为默认选择选项文本

Question

在我的项目中，有很多下拉列表。使用api服务从数据库加载这些下拉列表的项目。因此，无论何时加载，空白选项首先出现在所有项目中。如何删除第一个空白选项并替换为默认文本选择。

控制器

$scope.EnclosureModel = "";

loadEnclosure();
function loadEnclosure()
{
    $scope.loading = true;
    var promise = ngservice.getClosureType();
    promise.then(function (resp) {
        $scope.EnclosureList = resp.data;
        $scope.loading = false;
    });
}

api通过角度服务方法调用消耗

服务

this.getClosureType = function () {
    var res = $http.get("/api/Surge/GetEnclosure");
    return res;
};

这是我的观点：

Enclosure type 
<a href="#" onclick="return false;" rel="EnclosureType">
    <img src="img/question.jpg" Border="0" style="vertical-align:middle; width:16px;" />
</a>

<br />

<select ID="Drp_EnclosureType_Option1" AutoPostBack="True" Class="form-control form-control-small" ng-model="EnclosureModel" ng-options="p for p in EnclosureList" ng-change="getConf();getNoCurr();getMaxCur();getMScr();getLoc();getIec();getmCOV();getsysV();getIncidents();getRemSignals();getalr();getRejc();getCount();">
    <option Value ="" selected="selected">--Select--</option>
</select>

项目是从数据库中正确加载的，但每次都是第一个空白选项。检查了这么多帖子后我尝试了很多东西。 最后一个我试过

$ scope.EnclosureModel = {＆＃34;已选择＆＃34;：null}

它完全删除了第一个空白，但问题是其他下拉列表将根据此更改＆＃34; ENCLOSURE＆＃34; dropodownlist的项目选择。因此，当我尝试上面的其他下拉列表被更改并具有空项目。

我知道角度模型的行为与此类似，因为未选择任何项目时未定义的值。

但是如何从api服务加载数据的选项中删除第一个空白。

Answer 1

在填充angularjs中的下拉列表时遇到了类似的问题。我想出的解决方案是在选择框中选择第一个选项作为禁用的描述（请参阅下面的代码片段）：

<div class="row">
    <div class="col-sm-6 col-md-5 col-lg-3">
        <label>Incident Type:</label>
        <select id="incidentTypeDropdown" class="select-style select-style-required" ng-model="causeData.incidentType" ng-change="incidentTypeOnChange(causeData.incidentType)">
            <option value="" disabled selected>Select Incident Type...</option>
            <option ng-repeat="incident in incidentTypeList" value="{{incident.incidentTypeID}}">
                {{incident.type}}
            </option>
        </select>
    </div>
</div>

此代码段的相关部分可能对您有所帮助，这是第一个选项行：

<option value="" disabled selected>Select Incident Type...</option>

因此，此选项始终处于禁用状态，并充当用户对我希望他们执行的操作的说明“选择事件类型...”，然后这是网页上的结果：

我希望这种方法可以解决您的问题。