CODEWITHSUNDEEP
javascriptangularjs
Mr.Web
Mr.Web

Reputation: 7144

AngularJS, filter a list with hidden value

I have this list coming from PHP:

['id_cliente' => 1, 'nome' => "Arianna", 'cognome' => "Grande", 'tel' => "3339011233", 'source' => 1, 'stato' => 1, 'zona' => 3, 'indirizzo' => "Via Zanardelli, 17", 'city' => "Gardone Val Trompia", 'provincia' => "BS", 'impianto' => "CTO AP", 'id_utente' => 1, 'when' => "1450344800"],
['id_cliente' => 2, 'nome' => "Luigi", 'cognome' => "Baglioni", 'tel' => "3339011233", 'source' => 1, 'stato' => 2, 'zona' => 2, 'indirizzo' => "Via Guidini, 11", 'city' => "Roncadelle", 'provincia' => "BS", 'impianto' => "CTO CH", 'id_utente' => 3, 'when' => "1450427441"],
['id_cliente' => 3, 'nome' => "Maurizio", 'cognome' => "Serioli", 'tel' => "3339011233", 'source' => 1, 'stato' => 3, 'zona' => 2, 'indirizzo' => "Via Gramsci, 31", 'city' => "Torbole Casaglia", 'provincia' => "BS", 'impianto' => "PELLET", 'id_utente' => 3, 'when' => "1450427441"],
['id_cliente' => 4, 'nome' => "Rossella", 'cognome' => "Brescia", 'tel' => "3339011233", 'source' => 1, 'stato' => 4, 'zona' => 8, 'indirizzo' => "Via Roma, 1", 'city' => "Milano", 'provincia' => "MI", 'impianto' => "PELLET", 'id_utente' => 3, 'when' => "1450427441"],

I load this data from an Angular function that loads those data into the clienti array:

$scope.clienti = [];
$scope.loadClients = function(){
    $http.post('server/serve/loadClients', {'type': '1'})
        .success(function(data, status, headers, config) {
        $scope.clienti.push.apply($scope.clienti, data);
    });
};

In the HTML page I have a search box with search ng-model assigned, and a table rendering the rows. Inside this table there is an ng-switchthat takes the cliente.stato and renders a word based on its value:

<tr ng-repeat="cliente in clienti | filter:search">
....
    <td class="uk-text-center" ng-switch on="cliente.stato">
        <span class="uk-badge uk-badge-success" ng-switch-when="1">Nuovo</span>
        <span class="uk-badge uk-badge-warning" ng-switch-when="2">Appuntamentato</span>
        <span class="uk-badge md-bg-blue-A400" ng-switch-when="3">Eseguito</span>
        <span class="uk-badge uk-badge-danger" ng-switch-when="4">Annullato</span>
    </td>
....
</tr>

Now, I have 4 buttons to use to filter the cliente.stato.

I thought I could do this:

<li class="uk-active"><a ng-click="statusFilter = ''">Tutti</a></li>
<li><a ng-click="statusFilter = '1'">Nuovo</a></li>
...

And just add another filter to the table, like this:

<tr ng-repeat="cliente in clienti | filter:search | filter:statusFilter">

But here the problem is that the word shown on the table ("Eseguito" for example) is not the value of the item (the value is numerical, 1,2,3,4...).

EXPECTATION

And also I have to keep the active class for the pressed button, but that I can probably fix it myself.

Upvotes: 0

Views: 937

Answers (1)

Tom
Tom

Reputation: 4652

Basically you want to filter all with cliente.stato, which is number, create a custom filter is better:

// here angular will create a custom filter for you, so you can 
// use it in your code, now it accept two params, 
// the input is an array from your source, and the text
// is the expression after your filter, e.g. order: expression
angular.module('app', []).filter('order', function() {
  return function(input, text) {

    if (!text) {
      return input;
    }

    // if text is empty, we don't do anything, just return 
    // the original input

    // if text wasn't empty, we will filter it
    // array filter will accept comparator, so when 
    // the value is the element in input, and 
    // if the condition is true, it will return new 
    // array with the values when the condition is true

    return input.filter(function(value) {

       return parseInt(value.stato) == parseInt(text);
    });
  };
});

// at this time, the input is from filter:search returned result

<tr ng-repeat="cliente in clienti | filter:search | order:statusFilter">

So indeed it works like that:

THe clintei will be filter's (input), and then filter will return an array to be order's (input), then order will return an array, will be the real array used in ng-repeat

Upvotes: 2

Related Questions