javascript - 仅在单击按钮时使用 Angular 过滤器

标签 javascript angularjs filter

我似乎无法让我的过滤器仅在单击按钮时执行,它会第一次执行,然后根据框中的任何文本自动过滤。有人可以帮我吗?

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

最佳答案

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>

关于javascript - 仅在单击按钮时使用 Angular 过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36205143/

相关文章:

javascript - Jquery - 清除或删除 URL 参数

javascript - QueryBuilder 中的 datepicker 插件出现问题

php - 将来自各种服务的照片聚合到一个流中

javascript - 为什么这个 Angular2 JavaScript 示例应用程序无法启动?

javascript - 使用 ng-model 数组复制 html 元素时出错

arrays - 如何过滤嵌套数组作为响应?

android - 在隐藏键盘或按下返回之前,带过滤器的 ListView 不会刷新

javascript - React Material UI 卡 : how to change Card's class on expand? -> 自定义 React 组件

javascript - 如何使用 Angular 获取对象内属性的长度

javascript - 如何仅获取对象中由键数组定义的值?