Angular ui-select 占位符不起作用答案

【问题标题】：Angular ui-select placeholder not workingAngular ui-select 占位符不起作用
【发布时间】：2015-02-07 13:41:54
【问题描述】：

我们一直在使用 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>

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

【问题讨论】：

标签： javascript angularjs select angularjs-select2 ui-select

【解决方案1】：

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

占位符 span 元素：

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

刚刚删除了模板.js文件中的“$select.searchEnabled &&”，占位符又会出现。

hthabet on github 看到的

【讨论】：

【解决方案2】：

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

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

【讨论】：

干杯。我对此进行了调查，但这似乎不是问题，因为当时我的页面上只有一个模型。
我遇到的问题是我绑定的“.selected”变量被初始化为{}，这使得插件认为我已经选择了一个项目。我将它初始化为 null 并且它起作用了

【解决方案3】：

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

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

这里是被引用的对象：

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

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

【讨论】：

【解决方案4】：

查看分配给占位符的引导类“文本静音”。它有一个设置字体颜色“白色”的属性。所以试着评论这个属性。它对我有用。

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

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

如下所示开启 enableSearch。

$scope.enableSearch = function () { $scope.searchEnabled = true; };
或者查看@TDing mentioned 或@Steve Ellis 对此帖子的回答。

【讨论】：

【解决方案7】：

这里的问题在于 select.js 文件中的 isEmpty 检查。

只需替换此检查

值 = ctrl.selected; angular.isUndefined(值) ||值 === 空值；

与

angular.isUndefined(值) ||值 === 空 || angular.equals({}, value);

【讨论】：