appliquer la mise en forme du filtre dynamiquement dans un ng-repeat

La | angulaire de construire qui trouve un filtre défini avec le nom et l'applique à la valeur sur la gauche. Je pense que vous devez faire est de créer un filtre qui prend un filtre nom comme un argument, puis appelle le filtre approprié (fiddle) (adapté de M59 du code):

HTML:

<div ng-repeat="row in list">
    {{ row.value | picker:row.formatter }}
</div>

Javascript:

app.filter('picker', function($filter) {
  return function(value, filterName) {
    return $filter(filterName)(value);
  };
});

Grâce à @karlgold commentaire, voici une version qui prend en charge les arguments. Le premier exemple utilise la add filtre directement pour ajouter des numéros à un numéro existant et la seconde utilise le useFilter filtre pour sélectionner les add filtre par chaîne et de passer des arguments à (fiddle):

HTML:

<p>2 + 3 + 5 = {{ 2 | add:3:5 }}</p>
<p>7 + 9 + 11 = {{ 7 | useFilter:'add':9:11 }}</p>

Javascript:

app.filter('useFilter', function($filter) {
    return function() {
        var filterName = [].splice.call(arguments, 1, 1)[0];
        return $filter(filterName).apply(null, arguments);
    };
});

Une façon est d'utiliser une fonction pour la liaison et de faire le filtrage à l'intérieur de cette fonction. Cela peut ne pas être la meilleure approche: Démonstration en direct (clic).

<div ng-repeat="row in list">
  {{ foo(row.value, row.filter) }}
</div>

JavaScript:

$scope.list = [
  {"value": "uppercase text", "filter": "uppercase"}
];
$scope.foo = function(value, filter) {
  return $filter(filter)(value);
};

De crédit dans ce post, Jason Goemaat.

Voici comment je l'ai utilisé.

$scope.table.columns = [{ name: "June 1 2015", filter: "date" },
                        { name: "Name", filter: null },
                       ] etc...

<td class="table-row" ng-repeat="column in table.columns">
  {{ column.name | applyFilter:column.filter }}
</td>

app.filter('applyFilter', [ '$filter', function( $filter ) {
  return function ( value, filterName ) {
    if( !filterName ){ return value; } //In case no filter, as in NULL.
    return $filter( filterName )( value );
  };
}]);

La version la plus récente de ng-tableau permet dynamique de la création de la table (ng-dynamique-table) basé sur une configuration de colonne. Le formatage d'un champ date est aussi facile que d'ajouter le format de votre valeur d'un champ dans votre tableau de colonnes.

Donné

{
    "name": "Test code",
    "dateInfo": {
        "createDate": 1453480399313
        "updateDate": 1453480399313
    }
}

columns = [
    {field: 'object.name', title: 'Name', sortable: 'name', filter: {name: 'text'}, show: true},
    {field: "object.dateInfo.createDate | date :'MMM dd yyyy - HH:mm:ss a'", title: 'Create Date', sortable: 'object.dateInfo.createDate', show: true}
]

<table ng-table-dynamic="controller.ngTableObject with controller.columns" show-filter="true" class="table table-condensed table-bordered table-striped">
    <tr ng-repeat="row in $data">
        <td ng-repeat="column in $columns">{{ $eval(column.field, { object: row }) }}</td>
    </tr>
</table>

C'est ce que j'utilise (Angulaire de la Version 1.3.0-beta.8 accidentelle-haïku).

Ce filtre vous permet d'utiliser des filtres avec ou sans les options de filtre.

applyFilter va vérifier si le filtre existe dans Angulaire, si le filtre n'existe pas, un message d'erreur avec le filtre de nom dans le navigateur de la console comme si...

Le filtre suivant n'existe pas: greenBananas

Lors de l'utilisation de ng-repeat, certaines valeurs ne sera pas défini. applyFilter traitera de ces questions avec un soft fail.

app.filter( 'applyFilter', ['$filter', '$injector', function($filter, $injector){

  var filterError = "The following filter does not exist: ";

  return function(value, filterName, options){

    if(noFilterProvided(filterName)){ return value; }
    if(filterDoesNotExistInAngular(filterName)){ console.error(filterError + "\"" + filterName + "\""); return value; }
    return $filter(filterName)(value, applyOptions(options));
  };

  function noFilterProvided(filterName){
    return !filterName || typeof filterName !== "string" || !filterName.trim();
  }

  function filterDoesNotExistInAngular(filterName){
    return !$injector.has(filterName + "Filter");
  }

  function applyOptions(options){
    if(!options){ return undefined; }
    return options;
  }
}]);

Puis vous utilisez ce filtre que vous voulez, ce qui peut ou peut ne pas avoir le choix.

//Where, item => { name: "Jello", filter: {name: "capitalize", options: null }}; 
<div ng-repeat="item in items">
  {{ item.name | applyFilter:item.filter.name:item.filter.options }}
</div>

Ou vous pouvez utiliser avec des données séparées des structures lors de la construction d'une table.

//Where row => { color: "blue" };
//column => { name: "color", filter: { name: "capitalize", options: "whatever filter accepts"}};
<tr ng-repeat="row in rows">
  <td ng-repeat="column in columns">
    {{ row[column.name] | applyFilter:column.filter.name:column.filter.options }}
  </td>
</tr>

Si vous trouvez que vous avez besoin pour passer des valeurs plus spécifiques, vous pouvez ajouter d'autres arguments comme ça...

//In applyFilter, replace this line
return function(value, filterName, options){
//with this line
return function(value, filterName, options, newData){

//and also replace this line
return $filter(filterName)(value, applyOptions(options));
//with this line
return $filter(filterName)(value, applyOptions(options), newData);

Ensuite dans votre code HTML peut-être que votre filtre nécessite également une clé de la ligne objet

//Where row => { color: "blue", addThisToo: "My Favorite Color" };
//column => { name: "color", filter: { name: "capitalize", options: "whatever filter accepts"}};
<tr ng-repeat="row in rows">
  <td ng-repeat="column in columns">
    {{ row[column.name] | applyFilter:column.filter.name:column.filter.options:row.addThisToo }}
  </td>
</tr>