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

时间:2018-04-30 14:58:55

标签: angularjs

在我的项目中,有很多下拉列表。使用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服务加载数据的选项中删除第一个空白。

1 个答案:

答案 0 :(得分:0)

在填充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>

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

Drop down states

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