AngularJS search on button click

Question

I have a form where I want the user to be able to enter in search terms into textboxes, and then click a button to search the list. Is it possible to do something like this with ng-repeat and a button click? I'm really new to Angular, and I'm unsure if I can use it for this type of functionality. I have a little bit of code:

HTML

<div>    
<input ng-model="filterSearch.address" />
<input ng-model="filterSearch.city" />
<button ng-click="">Search</button>    
<table>
    <thead>
        <tr>
            <th>
                Address 
            </th>
            <th>
                City
            </th>
        </tr>            
    </thead>
    <tbody>            
        <tr ng-repeat="search in vm.searches | filter: filterSearch">
            <td>
                {{ search.address }}
            </td>
            <td>
                {{ search.city }}
            </td>
        </tr>
    </tbody>
</table>

Controller:

(function () {   
'use strict'
angular
    .module('crm.ma')
    .controller('AdvancedSearchCtrl', AdvancedSearchCtrl);

function AdvancedSearchCtrl() {
    var vm = this;
    vm.searches = [
               {
                   "address": "202 This St",
                   "city": "Columbus"
               },
               {
                   "address": "205 That St",
                   "city": "Dayton"
               }

    ];


}
})();

If anyone could point me in the right direction that would be great. Thanks.

Updated code:

<div>    
<input ng-model="searchModel.address" />
<input ng-model="searchModel.city" />
<button ng-click="filterSearch = searchModel">Search</button>    
<table>
    <thead>
        <tr>
            <th>
                Address 
            </th>
            <th>
                City
            </th>
        </tr>            
    </thead>
    <tbody>            
        <tr ng-repeat="search in vm.searches | filter:{'address': filterSearch.address, 'city': filterSearch.city}">
            <td>
                {{ search.address }}
            </td>
            <td>
                {{ search.city }}
            </td>
        </tr>
    </tbody>
</table>

Ron Brogan · Accepted Answer · 2015-11-04 14:49:05Z

2

You can specify fields to search on like:

    <tr ng-repeat="search in vm.searches | filter:{'address': filterSearch.address, 'city': filterSearch.city">
        <td>
            {{ search.address }}
        </td>
        <td>
            {{ search.city }}
        </td>
    </tr>

And if you need the on-click to trigger the search, you can just use something like:

ng-click="filterSearch = searchModel"

And change your inputs to use the searchModel variable.

answered Nov 4, 2015 at 14:49

Ron Brogan

9011 gold badge9 silver badges25 bronze badges

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

5 Comments

hollyquinn Over a year ago

Ok. I updated my code in my question to reflect the changes you have suggested. I'm doing something wrong though, because it's still searching the list when I type it into the textboxes instead of only searching and displaying when I click the button. Thanks for your help.

hollyquinn Over a year ago

Can you show me some code? I'm not sure how to do this?

Ron Brogan Over a year ago

If it's only happening after the first click, it's because the filterSearch object is set by reference to the searchModel object, rather than the values being copied. Just do filterSearch = angular.copy(searchModel)

hollyquinn Over a year ago

where do I put that at? I've got this? <input ng-model="searchModel.address" /> <input ng-model="searchModel.city" /> <button ng-click="ilterSearch = angular.copy(searchModel)">Search</button>

hollyquinn Over a year ago

I'm sorry I'm really bad with Angular. :)

Collectives™ on Stack Overflow

AngularJS search on button click

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related