从angularjs下拉列表中删除空白选项 [英] Remove blank option from angularjs dropdown

问题描述

下面的函数来自angularjs控制器，并为下拉菜单动态设置值，它可以工作，但第一个选项始终为空白，值为?".我应该如何修改该功能以删除空白选项或将所选选项设置为items [0]?

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

-编辑-

我还没有发布来自第3方软件包的完整控制器，该控制器显示当下拉值更改时调用u的功能.

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.

有2个下拉列表，当其中一个更改另一个应该使用新数据更新时，此部分有效，但是新数据具有上述额外的空白选项.

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.

谢谢

   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>

推荐答案

在设置 ngOptions 时，预期会重新分配 model.value 的值.

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

select 的第一个选项为空的原因是， ng-model 引用的值在 ng-model列表中不存在选项.

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

默认情况下，ngModel通过引用而非值监视模型.了解将选择绑定到作为对象或集合的模型时的重要性.

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.

如果您要预选一个选项，则会发生一个问题.例如，如果将模型设置为与集合中的对象相等的对象，则ngOptions将无法设置选择，因为这些对象不相同.因此，默认情况下，您应始终引用集合中的项目以进行预选择，例如:$ scope.selected = $ scope.collection [3].

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

这篇关于从angularjs下拉列表中删除空白选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！