单击按钮时 AngularJS 搜索

Question

我有一个表单，我希望用户能够在文本框中输入搜索词，然后单击按钮来搜索列表。是否可以通过 ng-repeat 和单击按钮来执行类似的操作？我对 Angular 还很陌生，我不确定是否可以将它用于此类功能。我有一些代码:

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"
               }

    ];


}
})();

如果有人能指出我正确的方向，那就太好了。谢谢。

更新的代码:

<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>

Answer 1

您可以指定要搜索的字段，例如:

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

如果您需要点击来触发搜索，您可以使用如下内容:

ng-click="filterSearch = searchModel"

并更改您的输入以使用 searchModel 变量。