AngularJS搜索按鈕

Question

嗨我有一個表單，可以搜索數據輸入到文本框，然後單擊提交按鈕。它在第一次完美運行，但是當我嘗試清除這些值並進行第二次搜索時，它會開始顯示數據而無需單擊按鈕。它只需在文本框中輸入即可進行雙向綁定。我需要它只在按鈕被點擊時才工作。這裏是我的代碼：

HTML

<form name="form" id="form" novalidate> 
<div> 
    <input ng-model="searchModel.address" /> 
    <input ng-model="searchModel.city" /> 
    <button type="submit" ng-click="filterSearch = searchModel">Search</button> 
    <button type="reset">Reset</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> 
</div> 

控制器：

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

    ]; 

} 

vm.SearchModel = function() { 
    var vm = this; 
    vm.filterSearch = angular.copy(searchModel); 
}; 
})(); 

Answer 1

我終於想通了這一點。

HTML

<div class="modal fade" id="myModal" role="dialog"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header">Search</div> 
     <div class="modal-body"> 
      <input id="address" ng-model="vm.searchModel.address" /> 
      <input id="city" ng-model="vm.searchModel.city" />    
      <button type="submit" ng-click="vm.search()" data-dismiss="modal">Search</button> 
      <button type="reset">Reset</button> 
     </div> 
    </div> 
</div> 

<div> 
<table> 
    <thead> 
     <tr> 
      <th> 
       Address 
      </th> 
      <th> 
       City 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="search in vm.filteredSearch"> 
      <td> 
       {{ search.address }} 
      </td> 
      <td> 
       {{ search.city }} 
      </td> 

     </tr> 
    </tbody> 
</table> 

控制器：

(function() { 
'use strict' 
angular 
    .module('crm.ma') 
    .controller('AdvancedSearchCtrl', function ($scope, $filter) { 

     var vm = this; 

     vm.searches = [ 
        { 
         "address": "202 This St", 
         "city": "Columbus" 

        }, 
        { 
         "address": "205 That St", 
         "city": "Erlanger"       
        } 

     ]; 
     vm.filteredSearch = vm.searches 
     vm.searchModel = {}; 
     vm.search = function() { 
      vm.filteredSearch = $filter('filter')(vm.searches, { 'address': vm.searchModel.address, 'city': vm.searchModel.city }); 
     } 
    }); 

})();