javascripthtmlangularjstwitter-bootstrap-3angularjs-filter

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

I'm new to AngularJS. I followed this post angularjs-ng-options-with-group and added data-live-search.

This is my json

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

My 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>

Image My select menu:

enter image description here

The problem is when I choose Orange then the output is Apple. I choose Apple the output is Grape. I choose Grape, the output is Flower.

I remove class="selectpicker", it works fine, but there is no searching in select menu.

Is there any solution for this or alternative?

Solution

  • Chances are that data-live-search from Bootstrap is incompatible with many Angular features. Instead, you should recreate the filtering it does with an Angular filter. Here is an example of a startsWith filter written in Angular, made for your data:

    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 with your data