Beispiel für das Parsen eines AngularJS-Filters

Das Unternehmen verwendet jetzt ionic, das einige auf AngularJS basierende APIs für Webapps kapselt. Der kürzlich verwendete AngularJS-Filter hat tatsächlich viel Code gespart.

ng ist ein relativ nutzloser Filter, lasst uns ihn hier kurz erwähnen! Nachfolgend finden Sie Beispiele für häufig verwendete Filter für Hühnersuppe.

Kleinbuchstaben(Kleinbuchstaben)

{{ Nachname | Kleinbuchstaben }}

Großbuchstaben(Großbuchstaben)

{{ Nachname | Großbuchstaben }}

Zahl (formatierte Zahl)

Der Zahlenfilter kann einer Zahl Tausenderteilungen hinzufügen, etwa 123.456.789. Gleichzeitig erhält es einen Parameter, der angeben kann, wie viele Dezimalstellen der kleine Float-Typ behält:

{{ num | number : 2 }}

currency (Währungsverarbeitung)

{{num |. json}}

json (formatiertes JSON-Objekt)

{{ jsonTest |. json}}

funktioniert genauso das bekannte JSON.stringify( ) ist dasselbe wie

limitTo (limit array length or string length)

{{childrenArray | : 3 }} //Die ersten 3 Elemente im Array wird angezeigt

Filter (passende Teilzeichenfolge)

wird verwendet, um ein Array zu verarbeiten und dann Elemente herauszufiltern, die eine bestimmte Teilzeichenfolge enthalten, und sie als Unterarray zurückzugeben. Es kann ein Array aus Strings oder ein Array aus Objekten sein. Wenn es sich um ein Array von Objekten handelt, kann der Wert des Attributs abgeglichen werden. Es erhält einen Parameter, um die Übereinstimmungsregel für den Teilstring zu definieren.

html

<ul>
 <li>filter 匹配子串(以下写法只是方便观察)</li>
 <li>{{ webArr | filter : &#39;n&#39; }} <!--匹配属性值中含有n的--></li>
 <li>{{ webArr | filter : 25 }} <!--匹配属性值中含有25的--></li>
 <li>{{ webArr | filter : {name : &#39;l&#39;} }} <!--//参数是对象，匹配name属性中含有l的--></li>
 <li>{{ webArr | filter : fun }} <!--/参数是函数，指定返回age>25的--></li>
</ul>

js

$scope.webArr = [
   {name:'nick',age:25},
   {name:'ljy',age:28},
   {name:'xzl',age:28},
   {name:'zyh',age:30}
  ];
$scope.fun = function(e){return e.age>25;};

Effektanzeige:

Übereinstimmende Teilzeichenfolge filtern (unten). Das Schreiben dient nur der Erleichterung der Beobachtung)

[{"name":"nick","age":25}]
[{"name":"nick","age":25}]
[{"name":"ljy","age":28},{"name":"xzl","age":28}]
[{"name":"ljy","age":28},{"name":"xzl","age":28},{"name":"zyh","age":30}]

Datumstyp

Der Datumsfilter sollte der einfachste unter den häufig verwendeten Filtern sein!

yyyy – stellt das Jahr dar;

MM – Monat (muss großgeschrieben werden);

dd – Datum; ;

mm--Minuten (muss in Kleinbuchstaben geschrieben werden);

ss--Sekunden;

EEEE--Woche; das Format ist 24-Stunden-Format;

h:mma--12-Stunden-Format;

wobei Jahr, Monat, Tag, Stunde, Minute, Sekunde oder /: – Warten Sie und versuchen Sie, eine Übereinstimmung herzustellen es selbst!

<ul>
 <li>8 日期1</li>
 <li ng-bind="date|date:&#39;yyyy/MM/dd hh:mm:ss EEEE&#39;"></li>
 <li>8 日期2</li>
 <li ng-bind="date|date:&#39;yyyy年MM月dd日 h:mma EEEE&#39;"></li>
 <li>8 日期3</li>
 <li ng-bind="date|date:&#39;yyyy年MM月dd日 hh时mm分ss秒&#39;"></li>
 <li>8 日期4</li>
 <li ng-bind="date|date:&#39;yyyy/MM/dd hh:mm:ss&#39;"></li>
 </ul>

Der Anzeigeeffekt von Datum 1:

2016/11/19 11:59:05 Samstag

Die Anzeige Wirkung von Datum 2 Anzeigewirkung:

19. November 2016, 12:01 Uhr Samstag

Datum 3 Anzeigewirkung:

22. November 2016, 10:42:09

Der Anzeigeeffekt von Datum 4:

22.11.2016 11:16:58

Reihenfolge nach Sortierung (ich persönlich denke, das siebte Beispiel ist die beste Art, es zu schreiben)

ng-repeat generiert einen unabhängigen Bereich und fügt Pipeline orderBy direkt nach der ng-repeat-Schleife hinzu.

Die Verwendung ist sehr einfach, aber es gibt zwei Fallstricke, die Sie beachten müssen:

Vergessen Sie nicht die Anführungszeichen des Parameters

Parameterform – schreiben Sie das Alter direkt, es ist nicht erforderlich, item2.age zu schreiben.

3 Nach Alter sortieren (Standard aufsteigende Reihenfolge)

Effektanzeige:

<ul>
 <li>3 按年龄排序(默认升序)</li>
 <li ng-repeat="item2 in items2|orderBy:&#39;age&#39;">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

4 Nach Alter sortieren (wenn der Parameter true hinzugefügt wird, wird dies der Fall sein in umgekehrter oder absteigender Reihenfolge sein)

按年龄排序(默认升序)
name ljy
age 27
stature 165
name nick
age 25
stature 170
name xzl
age 27
stature 175
name zyh
age 29
stature 165

<ul>
 <li ng-repeat="item2 in items2|orderBy:&#39;age&#39;:true">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

Effektanzeige:

Es ist in absteigender Reihenfolge, wodurch der Effekt nicht erzielt wird , siehe Beispiel 7)

Ich habe einmal naiv so geschrieben^*^

按年龄排序(加参数true则为倒序即降序)
name zyh
age 29
stature 165
name xzl
age 27
stature 175
name ljy
age 27
stature 165
name nick
age 25
stature 170

Effektanzeige:

6 Erst nach Alter und dann nach Größe sortieren (mehrere Parameter in Array-Form schreiben)

<ul>
 <!--<li ng-repeat="item2 in items2|orderBy:&#39;age&#39;:&#39;-stature&#39;">-->
 <li ng-repeat="item2 in items2|orderBy:&#39;age&#39;:&#39;stature&#39;:true">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

Effektanzeige:

想先按年龄升序在按身高降序(全是降序了，达不到效果，见第7例)
name zyh
age 29
stature 165
name xzl
age 27
stature 175
name ljy
age 27
stature 165
name nick
age 25
stature 170

7 Zuerst nach Alter in aufsteigender Reihenfolge und dann nach Höhe in absteigender Reihenfolge sortieren ( Mehrere Parameter in Array schreiben Form)

Fügen Sie vor den Parametern ein negatives Vorzeichen hinzu, um eine umgekehrte Reihenfolge zu erreichen

<ul>
 <li ng-repeat="item2 in items2|orderBy:[&#39;age&#39;,&#39;stature&#39;]">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

Effektanzeige:

先按年龄在按身高排序(多个参数写出数组形式)
name nick
age 25
stature 170
name ljy
age 27
stature 165
name xzl
age 27
stature 175
name zyh
age 29
stature 165

Ich persönlich denke, dass ng viele Filter eingebaut hat sind ziemlich nutzlos. Passen Sie Filter an individuelle Bedürfnisse an.

Benutzerdefinierter Filter

<ul>
 <li ng-repeat="item2 in items2|orderBy:[&#39;age&#39;,&#39;-stature&#39;]">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

Ein benutzerdefinierter Filter gibt einfach eine Funktion zurück und die Funktion gibt den gewünschten Wert zurück!

!!7 先按年龄升序在按身高降序(多个参数写出数组形式)
name nick
age 25
stature 170
name xzl
age 27
stature 175
name ljy
age 27
stature 165
name zyh
age 29
stature 165

Beispiel:

Anpassen eines Summationsfilters

html

Verwendung:

angular.module('youAppName',[])
  .filter('youFilterName',function(){
   return function(){
   //你的处理代码
   return result;//返回你要的值
   }
  })

Pipeline Alle Parameter vorher und danach sind und

js

<ul>
<li>!!1 求和</li>
<li ng-repeat="item1 in items1">
 <div ng-bind="item1.male | sumNick:item1.female:item1.gay"></div>
</li>
</ul>

Argumente – der Satz von Parametern, die von der Funktion akzeptiert werden, Klassenarray;

Array.prototype.slice.call(arguments )

Dieser Satz wandelt ein Array in ein Array um

var nickAppModule=angular.module('nickApp',[]);
 nickAppModule
  //求和
  .filter('sumNick',function(){
   return function(){
   var arr=Array.prototype.slice.call(arguments),sum=0;
   for(var i= 0,len=arr.length;i<len;i++){
    sum+=arr[i]?arr[i]:0;
   }
   return sum;
   }
  })

sum+=arr[i]?arr[i]:0;

Die Summe sum ist gleich die Akkumulation jedes Elements des Arrays von und. Vermeiden Sie die Übergabe von Werten im Hintergrund und die Übergabe sekundärer Parameter als Parameter an die benutzerdefinierte Dateifunktion. Schreiben Sie bei Fehlertoleranz 0, um die Sicherheit zu gewährleisten.

Passen Sie einen Filter an, um den Prozentsatz zu finden (finden Sie den Prozentsatz mit zwei Dezimalstellen)

html

Verwendung:

Zähler vorne geschrieben der Pipe, die Summe aller Parameter nach der Pipe und der Parameter vor der Pipe ist der Nenner

js

<ul ng-repeat="item1 in items1">
 <li>!!2 求百分比</li>
 <li>
  <b>male</b>
  <i ng-bind="item1.male|percentNick:item1.female:item1.gay"></i>
 </li>
 <li>
  <b>female</b>
  <u ng-bind="item1.female|percentNick:item1.male:item1.gay"></u>
 </li>
 <li>
  <b>gay</b>
  <s ng-bind="item1.gay|percentNick:item1.female:item1.male"></s>
 </li>
 </ul>

Hier ist ein zusätzlicher Satz zum Filter für die Summierung oben:

sum==0?'0%':Math.round((arr[0]?arr[0]:0)/sum*10000)/100+"%"

Die integrierte Math-Funktion Math.round rundet, um ganze Zahlen beizubehalten.

var nickAppModule=angular.module('nickApp',[]);
 nickAppModule
//百分比
  .filter('percentNick',function(){
   return function(){
   var arr=Array.prototype.slice.call(arguments),sum=0;
   for(var i= 0,len=arr.length;i<len;i++){
    sum+=arr[i]?arr[i]:0;
   }
   //0/0也是nan
   return sum==0?&#39;0%&#39;:Math.round((arr[0]?arr[0]:0)/sum*10000)/100+"%";
   }
  })

Multiplizieren Sie die Summe mit 10000 und dividieren Sie sie durch 100, um das Prozentzeichen zu verbinden, d. h. zwei Dezimalstellen beizubehalten.

Vollständiger Code:

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels jedem beim Lernen oder bei der Arbeit helfen kann Unterstützen Sie die chinesische PHP-Website!

Weitere Beispiele für die Analyse von Artikeln zum Thema AngularJS-Filter finden Sie auf der chinesischen PHP-Website!