Question

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

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

就我而言，默认文字应该是＆＃39;占位符＆＃39;属性。相反，它会显示为空白，直到您选择一个选项。我们一直在使用hack，我们在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>

之前有没有人遇到过这个问题，或者对我们做错了什么有任何想法？

Answer 1

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

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

Answer 2

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

占位符范围元素：

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

刚刚删除了＆＃34; $ select.searchEnabled＆amp;＆amp;＆＃34;在模板.js文件中，占位符将再次出现。

见hthabet on github

Answer 3

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

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

以下是被引用的对象：

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

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

Answer 4

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

Answer 5

当搜索项关闭或绑定元素为空时，Ui select不起作用。添加css display的最快方法是：阻止占位符项。

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

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

Answer 6

不是编辑源代码，而是可以做两件事来解决它。

启用enableSearch，如下所示。

[ResponseType(typeof(Post))] [HttpPost] [Route("api/Posts")] public IHttpActionResult PostPost(Post post) { if (!ModelState.IsValid) { return BadRequest(ModelState); } db.Posts.Add(post); db.SaveChanges(); return CreatedAtRoute("DefaultApi", new { id = post.ID }, post); }
或者查看@TDing mentioned或@Steve Ellis在这篇文章中的答案。

Answer 7

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

只需更换这张支票

value = ctrl.selected; angular.isUndefined（value）||值=== null;

与

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

Angular ui-select占位符不起作用

7 个答案: