Köşeli süzgeç yalnızca düğme tıklandığında

Question

Filtrem yalnızca düğme tıklamasıyla çalıştırılacak gibi görünmüyor, ilk kez çalıştırılıyor ve daha sonra kutudaki herhangi bir metin temelinde otomatik olarak filtreler. Birisi bana yardım edebilir mi?

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

, böyle filtre oluşturmak gereken tüm bu

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

Answer 2

İlk deneyin:

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

});

Ve html böyle bir şey görünmelidir: 'isFilterActive' değişkeni $ kapsamı yerleştirilebilir

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

. 'IsFilterActive' öğesi doğruysa, listeniz filtrelenir. Değerini değiştiren bir düğme oluşturabilirsiniz. https://scotch.io/tutorials/building-custom-angularjs-filters

Eğlencenin:

Ayrıca daha fazla bilgi veya bu eğitim için açısal filtreleri kontrol edebilirsiniz.