javascript Angular ui-select 占位符不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27382766/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular ui-select placeholder not working
提问by WillSeabrook
We have been using ui-select (https://github.com/angular-ui/ui-select) to theme dropdowns like select2. This functionality has largely been working apart from one aspect: default placeholders.
我们一直在使用 ui-select ( https://github.com/angular-ui/ui-select) 来主题下拉菜单，如 select2。此功能主要从一个方面发挥作用：默认占位符。
The code largely follows the ui-select demos (3rd example on this page: http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview).
该代码主要遵循 ui-select 演示（此页面上的第三个示例：http: //plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview）。
As far as I'm concerned the default text should be that of the 'placeholder' attribute. Instead, it appears blank until you choose an option. We have been using a hack whereby we set the value of the ui-select-match, in the Angular controller to counter this issue, but this is far from perfect and clearly not how it should be used.
就我而言，默认文本应该是“占位符”属性的文本。相反，它显示为空白，直到您选择一个选项。我们一直在使用一个技巧，我们在 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>
Has anyone ecountered this problem before, or have any idea as to what we are doing wrong?
有没有人以前遇到过这个问题，或者对我们做错了什么有任何想法？
采纳答案by timtom
If you're disabling search this will also hide the placeholder even when there is no selection.
如果您禁用搜索，即使没有选择，这也会隐藏占位符。
The placeholder span element :
占位符跨度元素：
<span ng-show="$select.searchEnabled && $select.isEmpty()" class="select2-chosen ng-binding ng-hide">My Placeholder</span>
Just removed the "$select.searchEnabled &&" in the template .js file and the placeholder will appear again.
刚刚删除了模板 .js 文件中的“$select.searchEnabled &&”，占位符将再次出现。
As seen on by hthabet on github
正如hthabet 在 github 上看到的那样
回答by Steve Ellis
I ran into this problem when I had something else in the controller bound to the ng-model, like producttype.selected. The other binding would initialize the model and make the ui-select directive behave as if a choice had already been made.
当我在绑定到 ng-model 的控制器中有其他东西时，我遇到了这个问题，比如producttype.selected. 另一个绑定将初始化模型并使 ui-select 指令表现得好像已经做出了选择。
If that's your problem, the on-selectcallback is helpful for binding the ui-select to another object, and then using merging the data you want back onto the original object.
如果这是您的问题，on-select回调有助于将 ui-select 绑定到另一个对象，然后使用将您想要的数据合并回原始对象。
回答by Marcidius
You will also run into this problem if the model you are binding to is part of an object and has a key/value pair where the key exists but the value is a null.
如果您绑定到的模型是对象的一部分并且具有键存在但值为空的键/值对，您也会遇到此问题。
<ui-select ng-model="vm.selectedItem.ID">....
And here is the object being referenced:
这是被引用的对象：
vm.selectedItem = {
ID: null,
description: null
}
This will result in a blank selection as well which prevents the placeholder from displaying. I'm currently working on a solution.
这也将导致空白选择，从而阻止显示占位符。我目前正在研究解决方案。
回答by voodoo_patch
Check out the bootstrap class "text-muted" that is assigned to the placeholder. It has a property that sets the font color "white". So try to comment this property. It worked for me.
查看分配给占位符的引导程序类“文本静音”。它有一个将字体颜色设置为“白色”的属性。所以试着评论这个属性。它对我有用。
回答by Hadnazzar
Ui select doesnt work when search item closed or if the binding element is empty. The fastest way to do that adding css display:block placeholder item.
当搜索项关闭或绑定元素为空时，UI 选择不起作用。添加 css display:block 占位符项的最快方法。
.select2-chosen{
display: block !important;
}
Or you can edit ui-select.js.
或者您可以编辑 ui-select.js。
回答by Mahib
Instead of editing the source code, you can do two things to fix it.
您可以做两件事来修复它，而不是编辑源代码。
Turn on enableSearch like following.
$scope.enableSearch = function () { $scope.searchEnabled = true; };Or check what @TDing mentionedor @Steve Ellis's answer on this post.
打开 enableSearch 如下所示。
$scope.enableSearch = function () { $scope.searchEnabled = true; };或者查看@TDing提到的内容或@Steve Ellis 在这篇文章中的回答。
回答by Sunny Nirala
The issue here is with the isEmpty check in select.js file.
这里的问题在于 select.js 文件中的 isEmpty 检查。
just replace this check
只需更换这张支票
value = ctrl.selected; angular.isUndefined(value) || value === null;
值 = ctrl.selected; angular.isUndefined(value) || 值 === 空；
with
和
angular.isUndefined(value) || value === null || angular.equals({}, value);
angular.isUndefined(value) || 值 === 空 || angular.equals({}, value);
