2

Pessoal estou com uma dificuldade em desenvolver um filtro de uma tabela que possui os campos name e price. Gostaria de filtrar um respectivo preço com as seguintes condições:

  • = (igual)
  • > (maior)
  • < (menor)

Segue abaixo um código simplificado como referência:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">
<div class="container">
    <div class="row"></div>
    <div class="row">
        <div class="col-lg-4 col-md-offset-4">
            <div class="input-group">
                <input type="text" class="form-control" ng-model="test" placeholder="Pesquisa por valor igual">
                <span class="input-group-addon">=</span>
            </div>
            <div class="input-group">
                <input type="text" class="form-control" ng-model="test" placeholder="Pesquisa por valor menor">
                <span class="input-group-addon"><</span>
            </div>
            <div class="input-group">
                <input type="text" class="form-control" ng-model="test" placeholder="Pesquisa por valor maior">
                <span class="input-group-addon">></span>
            </div>

            <table class="table table-striped">
                <tr>
                    <th>Nome</th>
                    <th>Valor</th>
                </tr>
                <tr ng-repeat="x in names | filter: test">
                    <td>{{x.name}}</td>
                    <td>{{x.price | currency}}</td>
                </tr>
            </table>
        </div>
    </div>

</div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
angular.module('myApp', []).controller('namesCtrl', function ($scope) {
    $scope.names = [
        {name:'Joao', price:3.50},
        {name:'Maria', price:4.60},
        {name:'Pedro', price:7.90},
        {name:'Miguel', price:1.20},
    ];
});
</script>
</body>
</html>

Alguém poderia me ajudar?

1 Resposta 1

1

o terceiro parâmetro do filter é o comparator, ele recebe uma function e assim você consegue fazer a condição que deseja:

 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">
<div class="container">
    <div class="row"></div>
    <div class="row">
        <div class="col-lg-4 col-md-offset-4">
            <div class="input-group">
                <input type="text" class="form-control" ng-model="test1.price" placeholder="Pesquisa por valor igual">
                <span class="input-group-addon">=</span>
            </div>
            <div class="input-group">
                <input type="text" class="form-control" ng-model="test2.price" placeholder="Pesquisa por valor menor">
                <span class="input-group-addon"><</span>
            </div>
            <div class="input-group">
                <input type="text" class="form-control" ng-model="test3.price" placeholder="Pesquisa por valor maior">
                <span class="input-group-addon">></span>
            </div>

            <table class="table table-striped">
                <tr>
                    <th>Nome</th>
                    <th>Valor</th>
                </tr>
                <tr ng-repeat="x in names | filter:test1:filterIgual | filter:test2:filterMenor | filter:test3:filterMaior">
                    <td>{{x.name}}</td>
                    <td>{{x.price | currency}}</td>
                </tr>
            </table>
        </div>
    </div>

</div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
angular.module('myApp', []).controller('namesCtrl', function ($scope) {
    $scope.names = [
        {name:'Joao', price:3.50},
        {name:'Maria', price:4.60},
        {name:'Pedro', price:7.90},
        {name:'Miguel', price:1.20},
    ];

    $scope.filterIgual = function (input, search_param) {
        if (search_param) {
            return input == search_param;
        }
        
        return true;
    }

    $scope.filterMenor = function (input, search_param) {
        if (search_param){
            return input <= search_param;
        }

        return true;
    }

    $scope.filterMaior = function (input, search_param) {
        return input >= search_param;
    }
});
</script>
</body>
</html>

1
  • Rafael muito obrigado! Exatamente o que precisava. Commented 9/01/2019 às 10:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .