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>

score 2 · Accepted Answer · answered Nov 04 '15 at 14:49

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 04 '15 at 14:49

Ron Brogan

892
1
9
25

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 Nov 04 '15 at 14:56
Can you show me some code? I'm not sure how to do this? – hollyquinn Nov 04 '15 at 15:00
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)` – Ron Brogan Nov 04 '15 at 15:01
where do I put that at? I've got this? – hollyquinn Nov 04 '15 at 15:03
I'm sorry I'm really bad with Angular. :) – hollyquinn Nov 04 '15 at 15:04

AngularJS search on button click

1 Answers1