Remove blank option from angularjs dropdown

Question

The function below comes from an angularjs controller and dynamically sets values for a dropdown, it works but the first option is always blank with a value of "?". How should I amend the function to either remove the blank option or set the selected option to items[0]?

--edit--

I haven't posted the full controller, which came from a 3rd party package, the controller shows the function u is called when the dropdown value changes.

There are 2 dropdowns, when one changes the other should update with new data, this part works but the new data has the extra blank option stated above.

thanks

   function u() {
          var subs;
          if (n.model.alias == "group") {
              var selectedGroup = document.getElementById("group").value;
              subs = angular.element(document.getElementById('subGroup')).controller();

              $.ajax({
                  url: "/umbraco/Api/ContentmentCustomApi/GetSubGroups",
                  type: "GET",
                  cache: false,
                  async: false,
                  data: { selectedGroup: selectedGroup }
              }).then(function (data) {
                  subs.items = data;
                });
          };
  }

      <div class="contentment" ng-class="vm.uniqueId" ng-controller="Umbraco.Community.Contentment.DataEditors.DropdownList.Controller as vm">     
        <select id="{{model.alias}}"             class="umb-dropdown"             lk-html-attributes="vm.htmlAttributes"             ng-model="model.value"           ng-change="vm.change()"       ng-options="item.value as item.name disable when item.disabled for item in vm.items">         
    
        </select> 
      </div>

check model.value, is it part of vm.items?

lastr2d2
– lastr2d2

2021-02-25 05:48:32 +00:00
Commented Feb 25, 2021 at 5:48 — lastr2d2
– lastr2d2, Commented Feb 25, 2021 at 5:48

lastr2d2 · Accepted Answer · 2021-02-25 06:35:37Z

1

+150

It's expected to reassign value for model.value when you set the ngOptions.

Something like this based on the code in your question

subs.items = data;
n.model.value = subs.items[0];

The reason why the first option of the select is empty is that, the value referenced by ng-model does not exist in the list of ng-option.

Note that sometimes the value is the same but it's not the same reference.

Something for further reading:

https://docs.angularjs.org/api/ng/directive/ngOptions

By default, ngModel watches the model by reference, not value. This is important to know when binding the select to a model that is an object or a collection.

One issue occurs if you want to preselect an option. For example, if you set the model to an object that is equal to an object in your collection, ngOptions won't be able to set the selection, because the objects are not identical. So by default, you should always reference the item in your collection for preselections, e.g.: $scope.selected = $scope.collection[3].

edited Feb 25, 2021 at 6:35

answered Feb 25, 2021 at 6:28

lastr2d2

4,0243 gold badges27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DarkW1nter Over a year ago

Thanks for the explanation it was very helpful. Your code sample works where I have only 1 dropdown, but didn't work as expected in my situation where I have 2 but it did help me arrive at a solution so I will award the bounty as soon as I can.

Collectives™ on Stack Overflow

Remove blank option from angularjs dropdown

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related