角度 ui 选择占位符不起作用

Angular ui-select placeholder not working

本文关键字：不起作用 占位符 选择 ui 角度      更新时间：2023-09-26

我们一直在使用 ui-select （https://github.com/angular-ui/ui-select） 来制作主题下拉列表，如 select2。此功能在很大程度上与一个方面分开工作：默认占位符。

代码主要遵循 ui-select 演示（本页的第三个示例：http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview）。

就我而言，默认文本应该是"占位符"属性的文本。相反，在您选择一个选项之前，它显示为空白。我们一直在使用一种技巧，即在 Angular 控制器中设置 ui-select-match 的值来解决这个问题，但这远非完美，显然不是应该如何使用它。

<ui-select data-ng-model="producttype.selected" theme="select2" name="product-type">
    <ui-select-match placeholder="Select a product type">
        {{$select.selected.title}}
    </ui-select-match>
    <ui-select-choices repeat="producttype in productTypeOptions | filter: $select.search">
        <span ng-bind-html="producttype.title | highlight: $select.search"></span>
    </ui-select-choices>                                               
</ui-select>

以前有没有人反驳过这个问题，或者知道我们做错了什么？

如果您禁用搜索，即使没有选择，这也将隐藏占位符。

占位符范围元素：

<span ng-show="$select.searchEnabled && $select.isEmpty()" class="select2-chosen ng-binding ng-hide">My Placeholder</span>

刚刚删除了模板.js文件中的"$select.searchEnabled &&"，占位符将再次出现。

正如hthabet在github上看到的那样

当我在绑定到 ng 模型的控制器中有其他东西时，我遇到了这个问题，比如 producttype.selected .另一个绑定将初始化模型，并使 ui-select 指令的行为就像已经做出了选择一样。

如果这是您的问题，on-select回调有助于将 ui-select 绑定到另一个对象，然后使用将所需的数据合并回原始对象。

如果您要绑定到的模型是对象的一部分，并且具有键/值对，其中键存在但值为 null，则也会遇到此问题。

<ui-select ng-model="vm.selectedItem.ID">....

这是被引用的对象：

vm.selectedItem = {
  ID: null,
  description: null
}

这也将导致空白选择，从而阻止显示占位符。 我目前正在研究解决方案。

查看分配给占位符的引导类"文本静音"。它具有将字体颜色设置为"白色"的属性。因此，请尝试评论此属性。它对我有用。

当搜索项关闭或绑定元素为空时，UI 选择不起作用。添加css显示的最快方法：块占位符项。

.select2-chosen{
   display: block !important;
}

或者你可以编辑ui-select.js。

您可以做两件事来修复它，而不是编辑源代码。

  1. 打开启用搜索，如下所示。

    $scope.enableSearch = function () { $scope.searchEnabled = true; };

  2. 或者查看@TDing提到的内容或@Steve埃利斯在这篇文章中的回答。

这里的问题出在 isEmpty 签入 select.js 文件中。

只需替换此检查

值 = Ctrl.选定;angular.isUndefined（value） ||值 === 空;

跟

angular.isUndefined（value） || value === null || angular.equals（{}， value）;

相关文章：