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>

控制器：

(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变量。

AngularJS搜索按钮单击

1 个答案: