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

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={"selected":null}

它完美地删除了第一个空白，但问题是其他下拉列表将根据此“ENCLOSURE”下拉列表的项目选择而改变。因此，每当我尝试使用上面的其他下拉列表时，都会更改并具有空项目。

我知道角度模型的行为是这样的，因为在未选择任何项目时未定义值。

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

Answer 1

我在angularjs 中填充下拉菜单时遇到了类似的问题。我想出的解决方案是在选择框中将第一个选项作为禁用的描述（参见下面的代码 sn-p）：

<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>

这段代码sn-p中可能对你有帮助的相关部分是第一个选项行：

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

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

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