CODEWITHSUNDEEP
angularjssmart-table
Ingó Vals
Ingó Vals

Reputation: 4898

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.

Upvotes: 1

Views: 1115

Answers (2)

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

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

Upvotes: 3

Naren Murali
Naren Murali

Reputation: 56522

In the smart filter documentation there is a way defined on how to do this, Refer the link Smart Table Filtering, So in this link its tells us to use the attribute st-set-filter on the smart table declarartion element. Another thing is, in select using ng-options we will get the datatype included in the ng-model of the select element, to remove this, you can use track by f.code, So the HTML changes are:

<section st-table="displayedCollection" st-safe-src="rowCollection" st-set-filter="myCustomFilter"> 
        <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 track by f.code"></select>
        {{displayedCollection}}
        <table class="table table-striped">
          <thead>
            <tr>

The JS contains a filter declaration taken from the docs.

app.filter('myCustomFilter', function($filter){
    return function(input, predicate){
        console.log(input, predicate);
        return $filter('filter')(input, predicate, true);
    }
});

Finally below is a demo for the same.

Plunkr Demo

Please let me know if you face any issues!

Upvotes: 1

Related Questions