Detaillierte Erläuterung der Verwendung des $filter-Filters in AngularJS (benutzerdefinierter Filter)

1. Eingebauter Filter

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

2. Benutzerdefinierter Filter

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

Wenden Sie das obige Format an, um zwei zu definieren Es gibt zwei einfache benutzerdefinierte Filter, einen mit Bedingungen und einen ohne Bedingungen.

(1) [Ohne Bedingungen], Funktion: feste Konvertierung (manchmal werden Sie im Projekt auf Rollencodes, Geschäftscodes usw. stoßen, aber bei der Anzeige muss das entsprechende Chinesisch angezeigt werden, z. B. Feldcode). : 101 steht für Boss

Derzeit gibt es mehr Codewerte wie diesen, daher ist es besser, Filter zu verwenden)

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) [Mit Bedingungen], Funktion zum Herausfiltern von Daten mit einem bestimmten Feldwert in einer Reihe von Arrays. Definieren Sie beispielsweise einen Filter, der alle Altersgruppen mit einem bestimmten Wert herausfiltert. Der Parameter ist Alter

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")(数组，“属性名称”，属性值)；
* */

[Zusammenfassung der Verwendung integrierter Filter]

(1) Das allgemeine Format in HTML ist: {{Gefilterte Daten |. Filtername: Bedingung 1: Bedingung 2.. . . }} ; Filterbedingungen werden durch ':' getrennt. (2) Das allgemeine Format im Code ist: Variable = $filter("Filtername") (gefilterte Daten, Filterbedingung 1, Filterbedingung 2 , . .)

(1) Definitionsformat: Modell: Modulname

Filtername: Filtername

Parameter 1: gefilterte Daten

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

Parameter 2 : Im Allgemeinen Filterbedingungen, es können mehrere vorhanden sein. Folgen Sie Parameter 3 bis Parameter N und fügen Sie ihn nach Bedarf hinzu.

Das Obige ist die vom Herausgeber eingeführte detaillierte Erklärung der Verwendung des $filter-Filters (benutzerdefinierter Filter). Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht . Der Herausgeber wird allen umgehend antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Ausführlichere Erläuterungen zur Verwendung von $filter-Filtern (benutzerdefinierten Filtern) in AngularJS finden Sie auf der chinesischen PHP-Website!