javascript - AngularJS，过滤具有隐藏值的列表

Question

我有这个来自 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"],

我从 Angular 函数加载这些数据，该函数将这些数据加载到 clienti 数组中:

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

在 HTML 页面中，我有一个分配了 search ng-model 的搜索框，以及一个呈现行的表格。该表内有一个 ng-switch，它接受 cliente.stato 并根据其值呈现一个单词:

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

现在，我有 4 个按钮可用于过滤 cliente.stato。

我想我可以做到这一点:

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

只需向表中添加另一个过滤器，如下所示:

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

但这里的问题是，表格上显示的单词(例如“Eseguito”)不是该项目的值(该值是数字，1,2,3,4...)。

期望

• 一旦我点击“Tutti”过滤器就会过滤记录并显示全部
• 如果我点击“Nuovo”，应过滤结果并仅显示 stato = 1 记录

而且我还必须保留按下的按钮的 active 类，但我可能可以自己修复它。

Answer 1

基本上你想用 cliente.stato 过滤所有内容，这是数字，创建一个自定义过滤器更好:

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

//此时输入的是filter:search返回的结果

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

所以它确实是这样工作的:

clintei将是filter的(输入)，然后filter将返回一个数组作为order的(输入)，然后order将返回一个数组，将是ng-repeat中使用的真正数组