Угловой фильтр только при нажатии кнопки

Question

Я не могу заставить фильтр работать только при нажатии кнопки, он выполняется в первый раз, а затем автоматически фильтруется в зависимости от того, какой текст находится в поле. Кто-нибудь может мне помочь?

<section class="searchField"> 
     <input type="text" ng-model="searchTerm"> 
     <button type="button" ng-click="search()">Search</button> 
</section> 

<section ng-show="!resultsHidden"> 
    <div class="no-recipes" ng-hide="players.length">No results</div> 
    <article class="playerSearch" ng-repeat="player in players | filter: filter" ng-cloak> 
     <h2> 
      <a href="#/players/{{player._id}}">{{player.name}}</a> 
     </h2> 
    </article> 
</section> 

Javascript:

$scope.myFilter = function (player) { 
      var found = []; 
      for(player in players) { 
       if (player.name === $scope.searchTerm || player.number === $scope.searchTerm){ 
        found.push(player); 
       } 
      } 
      return found; 
     }; 

     function search(){ 
      $scope.filter = $scope.searched; 
      $scope.resultsHidden = false; 
     } 

     $scope.searched = function(player){ 
      if (!$scope.searchTerm || (player.number == $scope.searchTerm || (player.name.toLowerCase().indexOf($scope.searchTerm.toLowerCase()) != -1))){ 
       return true; 
      } 
      return false; 
     }; 

Answer 1

var app = angular.module("app",[]) 
 
app.controller('ctrl',['$scope', function($scope){ 
 
     $scope.resultsHidden = false; 
 
$scope.players = [ 
 

 
{"name": "alpha"}, 
 
{"name": "beta"}, 
 
{"name": "gama"} 
 
]; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    
 
    <section class="searchField"> 
 
     <input type="text" ng-model="searchTerm"> 
 
     <button type="button" ng-click="filter = searchTerm;resultsHidden = !resultsHidden">Search</button> 
 
</section> 
 

 
<section ng-show="resultsHidden"> 
 
    <div class="no-recipes" ng-hide="players.length">No results</div> 
 
    <article class="playerSearch" ng-repeat="player in players | filter:{name:filter}" ng-cloak> 
 
     <h2> 
 
      <a href="#/players/{{player._id}}">{{player.name}}</a> 
 
     </h2> 
 
    </article> 
 
</section> 
 
</div>

попробовать этот

<button type="button" ng-click=" filter = searchTerm">Search</button> 

Answer 2

Прежде всего, вы должны создать фильтр, как это:

angular.module('myApp') 
.filter('my-filter', function(/* dependencies goes here */){ 
    return function (input, isFilterActive) { 
     if (isFilterActive){ 
      // filter your data 
      // your list will go into 'input' variable 
      // return filtered list 
     } 
     return input; //return data unfiltered; 
    } 

});

И ваш HTML должен выглядеть примерно так:

<p ng-repeat="x in subcategories | my-filter:isFilterActive"> 
    {{x.text}} 
</p> 

Где переменная 'isFilterActive' могут быть размещены на $ объеме. Если «isFilterActive» истинно, ваш список будет отфильтрован. Вы можете создать кнопку, которая изменит ее значение.

Вы также можете проверить угловые фильтры для более подробной информации или этого урока: https://scotch.io/tutorials/building-custom-angularjs-filters

удовольствие.