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

但问题在于表格中显示的单词（＆＃34; Eseguito＆＃34;例如）不是项目的值（值是数字，1,2,3,4 ... ）。

期望影响

点击＆＃34; Tutti＆＃34;过滤器应过滤记录并全部显示
如果我点击＆＃34; Nuovo＆＃34;应过滤结果并仅显示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);
    });
  };
});

//此时，输入来自过滤器：搜索返回结果

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

所以它的确如此：

clintei将是filter（输入），然后filter将返回一个数组为order（输入），然后order将返回一个数组，将是ng-repeat中使用的真实数组

AngularJS，过滤隐藏值为

1 个答案: