1

In my project, there are many dropdownlist. Items of those dropdownlist are loaded from database using api service. So, whenever it is loaded that blank option comes first of all items. How to remove that first blank option and replace with default text selection.

Controller

$scope.EnclosureModel = "";

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

api calls consumes by angular service method

service

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

Here is my View:

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>

Items are loaded properly from database but every time that blank option is on first.After checking so many post i have tried many things. Last one i tried

$scope.EnclosureModel={"selected":null}

It removed the first blank perfectly but problem is that other dropdownlist will be changing based on this "ENCLOSURE" dropodownlist's item selection. So when ever i tried with above other dropdown lists are changed and having null items.

I know angular model behaves like this because of undefined value when no items are selected.

But how to remove the first blank from option where data is loaded by api service.

slee423
  • 1,307
  • 2
  • 20
  • 34
learningMonk
  • 1,101
  • 13
  • 34

1 Answers1

0

I came across a similar problem when populating drop downs in angularjs. The solution I came up with was having the first option within the select box as a description that's disabled (see code snippet below):

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

The relevant part of this code snippet that may help you is the first option line:

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

So this option is always disabled and acts as a description for the user for what action I'd want them to do "Select Incident Type..." and then this is the outcome on the web page:

Drop down states

I hope this approach resolves your issue.

slee423
  • 1,307
  • 2
  • 20
  • 34
  • Thanks for your help. But when i changed my answer as you suggested. It is showing before loading.After that, same issue came with empty values. Is it possible for ng-options put default options first like you suggested above – learningMonk May 03 '18 at 08:52
  • @user7411584 apologies for the late response, were you able to get a solution to your issue? As for your reply, I'm not fully aware if you can add a default option to ng-options however, after looking into this a bit I noticed you can select your dropdown value so could it be possible to append a default option onto your list at the start that's a description? Then just select that item in the list after load? https://stackoverflow.com/questions/17329495/how-to-use-ng-option-to-set-default-value-of-select-element – slee423 May 10 '18 at 11:00