Angular filter only on button click

Question

I can't seem to get my filter to only execute on a button click, it executes the first time and then filters automatically based on whatever text is in the box. Can someone help me out?

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

Hadi · Accepted Answer · 2016-03-24 16:43:51Z

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>

try this

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

Vlad · Accepted Answer · 2016-03-24 16:51:58Z

First of all, you should create the filter like this:

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

});

And your html should look something like this:

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

Where 'isFilterActive' variable can be placed on $scope. If 'isFilterActive' is true, your list will be filtered. You can create a button that changes the value of it.

You can also check angular filters for more details or this tutorial: https://scotch.io/tutorials/building-custom-angularjs-filters

Have fun.

Collectives™ on Stack Overflow

Angular filter only on button click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related