Difficulty with filter in Angularjs

Asked

Viewed 115 times

2

Guys I’m having a hard time developing a table filter that has the fields name and price. I would like to filter a respective price with the following conditions:

  • = (equal)
  • > (greater)
  • < (minor)

Below is a simplified code as reference:

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

Could someone help me?

javascript angularjs filter

1 answer

1


the third parameter of the filter is Command, it receives a Function and so you can make the condition you want:

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

  • Rafael thank you so much! Exactly what I needed.

Browser other questions tagged javascript angularjs filter

You are not signed in. Login or sign up in order to post.