используя AngularJS и выберите тег Data-live-search не работает

Question

Я новичок в angularJS.Я следую за этим постом 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>   

Изображение Мое меню выбора:

проблема заключается в том, что, когда я выбираю оранжевый, на выходе отображается Apple

Я выбираю Apple, вывод - Grape.

Я выбираю Grape, вывод - Flower.

Я удаляю class = "selectpicker", он работает нормально, но в select нет поиска.меню.

Есть ли решение для этого или альтернативы?

Answer 1

Скорее всего, data-live-search от Bootstrap несовместим со многими угловыми функциями.Вместо этого вы должны воссоздать фильтрацию, которую он выполняет с Angular filter.Вот пример startsWith фильтра, написанного на Angular для ваших данных:

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;
    };
});

Работа JSFiddle с вашими данными