jQuery Chosen Select not filtering my data on table with angularjs ng-model

Question

I had to make some changes on the webpage i'm working, before this, i had an input textfield to filter results on a table, this was the code:

  <p><input type="text" class="form-control"  ng-model="search" placeholder="Search..."></p>

and the code for the table was:

<tr ng-repeat="data in someFile| filter:search | orderBy:'name'">
     <td>{{data.state + ', ' + data.city}}</td>
     <td> more data goes here etc...</td>
</tr>

that worked just fine, but now i need to change the input textfield for jQuery chosen select to get different info with multiple filters.

The code i tried is this:

 <select   data-placeholder="Search..." multiple class="control-group chosen-select" chosen id='sl_edo'  style="width:200px;">
            <optgroup   ng-repeat="data in someFile[0].state | orderBy:'name'" label={{data.name}}>
                <option  value=""> </option>
                <option  ng-model="search" ng-repeat="city in data.city | orderBy:'name'">
                                  {{city.name}}</option>
            </optgroup>
  </select>

i know that the ng-model code should go in the html select tag like this:

<select  ng-model="search" data-placeholder="Search..."  etc..

but that doesn't filter the results in the table, what happens is that the table goes blank, i have no idea why, unless i quit the filter the data goes back to table. What i can do to make the code work as intended?

EDIT: i have been watching what are the values in ng-model="search", so far they are treated like an array like this: ["data1","data2"...] (since i added the value={{localidad.nombre}} on the options tag), if i access to certain value in the array like this {{search[0]}}, displays the text normally like this data1, but still not filtering the table results, the table goes blank, any ideas on what's going on?

EDIT 2:i stumbled on some questions on stack overflow How to filter multiple values (OR operation) in angularJS, this could be an issue? i mean the filters are supposed to be multiple.

Londoner_Tom · Accepted Answer · 2015-09-02 16:52:57Z

2

Forgive me if this in a different Tangent to what your after but I wrote a quick example. Which I think covers what your trying to go after.JsFiddle Driven of the Value you have assigned to the option tag.

            <p><select data-ng-model="search"  >
            <option value="NY">New York</option>
            <option value="NV">New Vegas</option>
            <option value="AL">Alabama</option>
            </select>
            </p>

            <table>
            <tr ng-repeat="data in someFile| filter:search | orderBy:'name'" style="border: 1px solid black;" >
            <td>{{data.number}}</td>
             <td>{{data.state + ', ' + data.city}}</td>
             <td> more data goes here etc...</td>
            </tr>
            <table>

edited Sep 2, 2015 at 16:52

answered Sep 2, 2015 at 16:45

Londoner_Tom

216 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Progs Over a year ago

This gets closer to the solution, but as i mentioned before when i print the value of the ng-model display now like this ["someCity1","someCity2"], at least it's much better than this ["\n\t\t\t\t\t\t\t\t someCity1","\n\t\t\t\t\t\t\t\t someCity2"]

Mark Pieszak - Trilon.io · Accepted Answer · 2015-09-02 15:41:21Z

1

What you're missing is what within your search model you want it to go by. search itself is an object of key values.

<tr ng-repeat="data in someFile | filter:search.XXXX | orderBy:'name'">

Where XXXX is the property name of what you're trying to search by. Whether it be search.Guid / search.Name whatever you have there.

answered Sep 2, 2015 at 15:41

Mark Pieszak - Trilon.io

68.3k15 gold badges84 silver badges96 bronze badges

1 Comment

Progs Over a year ago

Yes, this kinda works when i print the ng-model values on the webpage i get something like this ["\n\t\t\t\t\t\t\t\t someCity1","\n\t\t\t\t\t\t\t\t someCity2"], so in way it's working, but for some reason when i try to put in the filter the name of the property, it doesn't print nothing and doesn't filter the table either.

Collectives™ on Stack Overflow

jQuery Chosen Select not filtering my data on table with angularjs ng-model

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related