AngularJS Dropdown and Textbox Filter

Question

I have an ng-repeat that creates a table of data. Each entry has several properties, including IP Address, MAC Address, author and more. I have a textbox that automatically sorts IP address, but I also want to provide a dropdown that allows users to select which property they would like to filter by.

For example, the default behavior is that by typing "12" into the box, only entries with "12" in the IP Address will be displayed. But if the user selects "Author" from the dropdown and types "Mark" into the textbox, only entries with "Mark" as the author will be displayed.

I tried setting the textbox's ng-model to "selectFiler.value" but that didn't work.

<form>
    <select ng-model="selectFilter">
        <option value="incident_at">Incident Date</option>
        <option value="ip_addr" selected="selected">IP Address</option>
        <option value="mac_addr">MAC Address</option>
        <option value="created_at">Created On</option>
        <option value="author">Author</option>
    <select>
    <input type="text" placeholder="Search by IP" ng-model="filterTable.ip_addr">
</form>

Here's some code, but because I'm using ui-router and templates for the full project I can't get the data to display in Plunker: http://plnkr.co/edit/kNqx1g3HidEM0ORzsSJt?p=preview

How can I make this work?

user3941146 · Accepted Answer · 2015-07-11 03:42:47Z

1

Try using typeahead from angular-bootstrap library.

answered Jul 11, 2015 at 3:42

user3941146

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

2 Comments

user5104897 Over a year ago

I don't understand how that helps. This picture I what I want. I just want to let the user select which table column they are filtering when they type into the textbox.

user3941146 Over a year ago

Ah, I see now. Then, my answer is not really valid for this case.

Collectives™ on Stack Overflow

AngularJS Dropdown and Textbox Filter

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related