In der Welt der AngularJs bietet Filter eine Möglichkeit, Daten zu formatieren. Angular bietet uns auch viele integrierte Filter und ist auch recht einfach, benutzerdefinierte Filter zu erstellen.
In der HTML -Vorlagenbindung {{}} verwenden wir | Filter anzurufen. Zum Beispiel möchten wir, dass die Zeichenfolge alle Kapitalzeichen anzeigt:
{{name | Großbuchstaben}}Natürlich können wir den $ Filter -Dienst in JavaScript auch verwenden, um Filter aufzurufen und die String -Kapitalisierung als Beispiel zu verwenden:
app.Controller ('Democontroller', ['$ scope', '$ filter', Funktion ($ scope, $ filter) {$ scope.name = $ filter ('Kleinbuchstaben') ('ari');}]);Wie übergeben Sie Parameter an Filter? Setzen Sie einfach die Parameter nach dem Filter ein und fügen Sie einen Dickdarm in der Mitte hinzu (fügen Sie nach jedem Parameter einen Dickdarm hinzu). Beispielsweise kann ein Zahlenfilter uns helfen, die Anzahl der Ziffern zu begrenzen. Wenn Sie zwei Dezimalstellen anzeigen möchten, fügen Sie die Nummer hinzu: 2.
{{{123.456789 | Nummer: 2}}Der Filterfilter wird hauptsächlich verwendet, um ein Array von Daten zu filtern und ein neues Array mit Subtarray -Daten zurückzugeben.
Wenn wir beispielsweise auf der Client -Seite suchen, können wir die gewünschten Ergebnisse des Arrays schnell herausfiltern.
Diese Filtermethode empfängt einen String-, Objekt- oder Funktionsparameter, um Array -Elemente auszuwählen/zu entfernen.
Schauen wir es uns ausführlich an:
1. Eingebauter Filter
1, Großbuchstaben, Umwandlung von Kleinbuchstabengrößen
{{"Lower Cap String" | Großbuchstaben}} // Ergebnis: Unterkappe String {{"Tank ist gut" | Kleinbuchstaben}} // Ergebnis: Tank ist gut｜ Die vertikale Linie hier ist eine Pipeline -Funktion. Wenn Sie mit Linux vertraut sind, ist die Pipeline -Funktion dieses Teils im Grunde genommen mit 2, JSON, formatiert
{{{foo: "bar", baz: 23} | JSON}} // Ergebnis: {"Foo": "Bar", "Baz": 23}HINWEIS: BZA hat vor der Formatierung keine doppelten Zitate und wird nach der Formatierung in JSON -Daten konvertiert.
3. Datum Formatierung
Mysql Timestamp ng-bind = "message.time * 1000 | Datum: 'yyyy-mm-dd'"
{{1304375948024 | Datum: 'Medium'}} // Mai 03, 2011 06:39:08 PM {{1304375948024 | Datum}} // Ergebnis: 3. Mai 2011 {{1304375948024 | Datum: "MM/DD/YYYY @ H: MMA"}} // Ergebnis: 05/03/2011 @ 6:39 {{1304375948024 | Datum: "yyyy-mm-dd hh: mm: ss"}} // result: 2011-05-03 06:39:084. Zahlenformatierung
{{1.234567 | Nummer: 1}} // Ergebnis: 1.2 {{{1234567 | Nummer}} // Ergebnis: 1,234.5675. Währungswährungsformatierung
{{250 | Währung}} // Ergebnis: $ 250.00 {{250 | Währung: "RMB ￥"}} // Ergebnis: RMB ￥ 250.006. Die Filtersuche kann nur den Wert überprüfen, nicht der Schlüssel
{{{{"Alter": 20, "ID": 10, "Name": "iPhone"}, {"Alter": 12, "ID": 11, "Name": "Sunm Xing"}, {"Alter": 44, "ID": 12, Name ":" test abc "}] | filter:'s'}} //Find rows with s//The result of the above example: [{"age":12,"id":11,"name":"sunm xing"}, {"age":44,"id":12,"name":"test abc"}] {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12, "ID": 11, "Name": "Sunm Xing"}, {"Alter": 44, "ID": 12, "Name": "Test ABC"}] | Filter: {'name': 'ip'}}} // Die Namenszeile wie IP finden // das Ergebnis des obigen Beispiels: [{"Alter": 20, "ID": 10, "Name": "iPhone"}] $ filter ('Nummer') (30000, 2); var jSonstring = $ filter ('JSON') ({"Alter": 12, "ID": 11, "Name": "Sunm Xing"}, {"Alter": 44, "ID": 12, "Name": "Test ABC"}])7. Limitto -String, Objektabschnitt
{{"Ich liebe Tank" | Limitto: 6}} // Ergebnis: Ich liebe {{"Ich liebe Tank" | Limitto: -4}} // Ergebnis: Tank {{{{älter ": 20," id ": 10," name ":" iPhone "}, {" älter ": 12," id ": 11," name ":" sunm xing "}, {" älter ": 44," id ": 12," name ":" test § "}] | Limitto: 1}} // Ergebnis: [{"Alter": 20, "ID": 10, "Name": "iPhone"}]8. OrderBy -Objektsortierung
{{{{"Alter": 20, "ID": 10, "Name": "iPhone"}, {"Alter": 12, "ID": 11, "Name": "Sunm Xing"}, {"Alter": 44, "ID": 12, Name ":" test abc "}] | orderBy: 'id': true}} // root id absteigende order {{[{"Alter": 20, "id": 10, "name": "iPhone"}, {"älter": 12, "id": 11, "name": "sunm xing"} orderBy: 'id'}} // sortiert {{[{"älter": 20, "id": 10, "name": "iPhone"}, {"älter": 12, "id": 11, "name": "sunm xing"} OrderBy: ['-Age', 'Name']}}2. Benutzerdefinierte Filterfunktion
Die Anpassungsmethode des Filters ist ebenfalls sehr einfach. Verwenden Sie die Filtermethode des Moduls, um eine Funktion zurückzugeben, die den Eingangswert empfängt, und gibt das verarbeitete Ergebnis zurück.
App.filter ('Filtername', Funktion () {Rückgabefunktion (Objekt, das gefiltert werden muss, Filterparameter 1, Filterparameter 2, ...) {//...Do einige Dinge geben das verarbeitete Objekt zurück;}});Ich fand ein grundlegendes AngularJS -MVC -Framework, einen Phonecat und einen benutzerdefinierten Filter, der auch auf dieser Grundlage geschrieben ist. Dieser Rahmen ist sehr nützlich.
filters.js fügen ein Modul hinzu
Angular.module ('Tanktest', []). Filter ('Tankreplace', Funktion () {Rückgabefunktion (Eingabe) {return input.replace (/Tank/, "======")};});In HTML gerufen
{{"Tank ist gut" | Kleinbuchstaben | Tankreplace}} // Ergebnis: ===== ist gutHinweis: | Kleinbuchstaben | Tankreplace -Pipeline -Befehle können mehrere haben
yourApp.filter ('orderObjectBy', function () {return function (items, field, reverse) {var filtered = []; Angular.foreach (Elemente, Funktion (Element) {filtered.push (item);}); gefiltert. gefiltert;Dieser Filter wandelt das Objekt in ein Standard -Array um und sortiert es nach den von Ihnen angegebenen Feldern. Sie können den OrderObjectBy -Filter verwenden, um OrderBy zu ähneln, einschließlich eines booleschen Wertes nach dem Feldnamen, in der angegebenen Reihenfolge, unabhängig davon, ob er umgekehrt werden sollte. Mit anderen Worten, die Fälschung ist aufsteigender Ordnung, der wahre Rückgang. HTML -Anruf
<li ng-Repeat = "Element in Elementen | orderObjectBy: 'color': true"> {{item.color}} </li>Sortieren Sie die Suche
<input type = "text" ng-model = "such" placeholder = "such"> <thead> <tr> <!-ng-class = "{Dropup: true}"-> <th ng-klick = "ChangeOrder ('id')" ng-class = "{Dropup: order ==== '} product number <span Nr. 'id'}"></span> </th> <th ng-click="changeOrder('name')" ng-class="{dropup: order === ''}"> Product name<span ng-class="{orderColor: orderType === 'name'}"></span> </th> <th ng-click="changeOrder('price')" ng-class="{dropup: order === ''} "> Produktpreis <Span Ng-Class =" {OrderColor: OrderType === 'Preis <td> {{item.name}} </td> <td> {{item.price | Währung: '￥'}} </td> </tr> </tbody>Angularjs
// Standardsortierfeld $ scope.Ordertype = 'id'; $ scope.order = '-'; $ scope.changeOrder = function (type) {console.log (type); $ scope.ordType = Typ; if ($ scope.order === '') {$ scope.order = '-'; } else {$ scope.order = ''; }}