Explication détaillée de l'utilisation du filtre $filter dans AngularJS (filtre personnalisé)

1. Filtre intégré

* $filter 过滤器，是angularJs中用来处理数据以更好的方式展示给我用户。比如格式化日期，转换大小写等等。
* 过滤器即有内置过滤器也支持自定义过滤器。内置过滤器很多，可以百度。关键是如何使用：
* 1.在HTML中直接使用内置过滤器
* 2.在js代码中使用内置过滤器
* 3.自定义过滤器
*
* （1）常用内置过滤器
*    number 数字过滤器，可以设置保留数字小数点后几位等
*    date  时间格式化过滤器，可自己设置时间格式
*    filter 过滤的数据一般是数组，数组中的数据可以是对象，字符串等
*    orderBy 排序根据数组中某一个元素的属性排序等
*    lowercase 转换小写
*    uppercase 转换大写
*    limitTo  字符串剪切 使用格式{{被剪切的字符串|limitTo：数值}} 数值绝对值代表要切得字符个数，正代表从头开始切，负值相反。
*
* */

2. Filtre personnalisé

/*
* 定义格式：
* 模块名称.filter(‘过滤器名字'，function(){
*    return function(被过滤数据，条件1，条件2.。。。){
*    //过滤操作
*    }
* });
* */

Appliquez le format ci-dessus pour en définir deux. Il existe deux filtres personnalisés simples, un avec conditions et un sans conditions.

(1) [Sans conditions], fonction : conversion fixe (parfois vous rencontrerez des codes de rôle, des codes de magasin, etc. dans le projet, mais lorsqu'il est affiché, le chinois correspondant doit être affiché, comme le code de champ : 101 représente Boss

À l'heure actuelle, il y a plus de valeurs de code comme celle-ci, il est donc préférable d'utiliser des filtres)

myApp.filter("ChangeCode",function () {
  return function (inputData) {
    var changed = "";
    switch (inputData){
      case '101':changed = "老板";break;
      case '102':changed = "经理";break;
      case '103':changed = "员工";break;
    }
    return changed;
  }
});
/*完成，说一下使用场景（就这个过滤器的功能）和方式。
* 场景：服务器返回的数据中有个字段code，直接放标签里<div>{{data.code}}</div>,会显示code值而不是code值对应的职称，这时候就可以用这个专门
*    针对这个转换的自定义过滤器
* 使用方式：
*      （1）HTML中：<div>{{data.code | ChangeCode}}</div>//跟内置过滤器一样的方式
*      （2）js中：变量 = $filter("ChangeCode")(被过滤的code数据)//一样的调用方式
*     
* */

(2) [Avec conditions], fonction. Filtrez les données avec une certaine valeur de champ dans un ensemble de tableaux. Par exemple, définissez un filtre qui filtre tous les âges avec une certaine valeur. Le paramètre est l'âge

myApp.filter("deleteByAge",function () {
  return function (input,byAge,age) {
    var array = [];
    for(var i=0;i<input.length;i++){
      if(input[i][byAge]!=age){
        array.push(input[i]);
      }
    }
    return array;
  }
})
/*
* 处理一组数据的时候一般很少用在HTML当中，带条件的自定义过滤器是根据年龄值，也可以根据数组元素中的任意一个属性值进行删除过滤。
* 使用方式：变量 = $filter("deleteByAge")(数组，“属性名称”，属性值)；
* */

[Résumé de l'utilisation des filtres intégrés]

(1) Le format général en HTML est : {{Données filtrées | Nom du filtre : condition 1 : condition 2.. . . }} ; Les conditions de filtre sont séparées par ':'

(2) Le format général dans le code est : Variable = $filter("Nom du filtre") (données filtrées, condition de filtre 1, condition de filtre 2). , . .)

(1) Format de définition : modèle : nom du module

filterName : nom du filtre

model.filter(filterName，function(){
   return function(参数1，参数2，参数3.。。。。参数N){
     //过滤器处理部分
    }
  })

Paramètre 1 : données filtrées

Paramètre 2 : généralement filtrer les conditions, il peut y en avoir plusieurs, en suivant les paramètres 3 jusqu'au paramètre N, ajouter selon les besoins.

Ce qui précède est une explication détaillée de l'utilisation du filtre $filter (filtre personnalisé) dans AngularJS introduit par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message. . L'éditeur répondra à tout le monde rapidement. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !

Pour des explications plus détaillées sur l'utilisation des filtres $filter (filtres personnalisés) dans AngularJS, veuillez faire attention au site Web PHP chinois !