CODEWITHSUNDEEP
javascriptangularjs
user5104897
user5104897

Reputation: 155

AngularJS Dropdown and Textbox Filter

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?

Upvotes: 0

Views: 3179

Answers (1)

user3941146
user3941146

Reputation:

Try using typeahead from angular-bootstrap library.

Upvotes: 1

Related Questions