【问题标题】:Remove blank option from angularjs dropdown从 angularjs 下拉列表中删除空白选项
【发布时间】:2021-05-24 21:26:39
【问题描述】:

下面的函数来自 angularjs 控制器并动态设置下拉列表的值,它可以工作,但第一个选项始终为空白,值为“?”。我应该如何修改函数以删除空白选项或将所选选项设置为 items[0]?

--编辑--

我还没有发布完整的控制器,它来自第三方包,控制器显示当下拉值更改时调用的函数 u。

有 2 个下拉菜单,当一个更改另一个应使用新数据更新时,这部分有效,但新数据具有上述额外的空白选项。

谢谢

   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>

【问题讨论】:

  • 检查model.value,它是vm.items的一部分吗?

标签: javascript html angularjs


【解决方案1】:

当您设置ngOptions 时,预计会重新分配model.value 的值。

基于您问题中的代码的类似内容

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

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

请注意,有时值相同但引用不同。

进一步阅读:

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

默认情况下,ngModel 通过引用而不是值来监视模型。在将 select 绑定到作为对象或集合的模型时,了解这一点很重要。

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

【讨论】:

  • 感谢您的解释,这非常有帮助。您的代码示例在我只有 1 个下拉列表的情况下有效,但在我有 2 个下拉列表的情况下没有按预期工作,但它确实帮助我找到了解决方案,所以我会尽快奖励赏金。
猜你喜欢
  • 1970-01-01
  • 2017-02-16
  • 1970-01-01
  • 1970-01-01
  • 2016-11-01
  • 2016-07-24
  • 1970-01-01
  • 1970-01-01
  • 2014-08-28
相关资源
最近更新 更多