Winkelfilter nur auf Knopfdruck

Question

Ich kann nicht scheinen, meinen Filter zu erhalten, nur auf einem Knopfklick auszuführen, es führt das erste Mal aus und filtert dann automatisch basierend auf dem Text, der in der Schachtel ist. Kann mir jemand helfen?

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

versuchen, diese

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

Answer 2

Zunächst einmal sollten Sie den Filter wie folgt erstellen:

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

});

Und Ihre html sollte wie folgt aussehen:

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

Wo isFilterActive 'Variable kann auf $ Umfang platziert werden. Wenn 'isFilterActive' wahr ist, wird Ihre Liste gefiltert. Sie können eine Schaltfläche erstellen, die den Wert ändert.

Sie können auch Winkel Filter, um weitere Informationen überprüfen oder dieses Tutorial: https://scotch.io/tutorials/building-custom-angularjs-filters

Haben Sie Spaß.