使用 AngularJS 和 select 标签 Data-live-search 不工作

Question

我是 AngularJS 的新手。我按照这个 post angularjs-ng-options-with-group 并添加了 data-live-search.

这是我的json

{"Type":"Orange","NSX":"Group1"},
{"Type":"Apple","NSX":"Group1"},
{"Type":"Grape","NSX":"Group1"},
{"Type":"Flower","NSX":"Group2"}

我的html:

<select data-live-search="true" data-live-search-style="startsWith" 
 ng-model="val"  class="selectpicker"
 ng-options="x.Type group by x.NSX for x in Farm">              
</select>

图片我的 select 菜单：

问题是当我选择 Orange 然后输出是 Apple。我选择 Apple，输出是 Grape。我选择葡萄，输出是花。

我删除了class="selectpicker"，它工作正常，但在select菜单中没有搜索。

是否有任何解决方案或替代方案？

Answer 1

可能 Bootstrap 中的 data-live-search 与许多 Angular 功能不兼容。相反，您应该使用 Angular filter 重新创建过滤。这是一个用 Angular 编写的 startsWith 过滤器的示例，是为您的数据制作的：

app.filter('startsWith', function () {
    return function (items, input) {
        if(input === undefined || input.length === 0){
          return items;
        }

        var filtered = [];
        var inputMatch = new RegExp(input, 'i');
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if (inputMatch.test(item.Type.substring(0, input.length))) {
                filtered.push(item);
            }
        }
        return filtered;
    };
});

Working JSFiddle 用你的数据

使用 AngularJS 和 select 标签 Data-live-search 不工作

using AngularJS and select tag Data-live-search not working

javascript

html

angularjs

twitter-bootstrap-3

angularjs-filter