Search code examples
angularjssmart-table

Can't filter with select in smart-table


Trying to filter a table using a select and ng-options but not successful. I've got a plunker showing the problem. Anyone who can see what is going on?

http://plnkr.co/edit/WlojiFw26gqUoEDXOeQd?p=preview

My Select:

<select class="form-control"
    st-search="code"
    st-input-event="change"
    st-delay="0"
    ng-model="selectedStatusFilter"
    ng-options="f.code as f.text for f in codeOptions">
</select>

My options:

$scope.codeOptions = [{
    'text': 'On',
    'code': 'On'
  }, {
    'text': 'Off',
    'code': 'Off'
  }, {
    'text': 'Cat',
    'code': 'Cat'
  }, {
    'text': 'All',
    'code': ''
  }]

Typical item in collection:

code : "On"
firstName : "Laurent"
id : 9
lastName : "Renard"

So what I'm hoping to happens is that the value of the Select gets interperated as a filter on the code property of the items in collection. So when "On" is selected only items with code : 'On' are shown, and with All selected because the value there is "" we should see all items.

  • Using Angular version 1.6.4
  • Using Smart-Table 2.1.8

Solution

  • As alternative way you can use <option> and ng-repeat without any ng-model

     <select class="form-control" st-search="code">
                    <option ng-repeat="f in codeOptions" 
                    ng-selected="codeOptions.indexOf(f) == 3"
                    value="{{f.code}}">{{f.text}}</option>
    </select>
    

    Demo Plunker