Erstellen eines Typeakhead -Widgets mit AngularJS - SitePoint

Wenn Sie ein AngularJS -Projekt starten, möchten Sie möglicherweise alle Komponenten in Angular geschrieben haben. Obwohl es sicherlich möglich ist, die vorhandenen JQuery -Plugins wiederzuverwenden, ist es nicht immer der richtige Weg, Dinge in eine Richtlinie zu werfen, um Dinge zu tun. Mein Rat wäre, zuerst zu überprüfen, ob dasselbe mit reinem Angular einfacher/besser implementiert werden kann. Dadurch wird Ihr Anwendungscode sauber und aufrechterhalten. Dieses Tutorial, das sich an Anfänger richtet, führt die Leser durch die Schaffung eines einfachen Widgets zum Typenhead mit AngularJs.

Key Takeaways

• Die Tutorial führt die Leser durch das Erstellen eines Widgets zum Typenhead mit AngularJS, das Vorschläge als Benutzerentyp in ein Textfeld liefert. Das Widget ist so konfiguriert und leicht in vorhandene Systeme integriert.
• Der Prozess beinhaltet das Erstellen einer Fabrik, die mit einer erholsamen API interagiert und JSON-Daten für automatische Vorschläge zurückgibt, eine Direktive erstellt, um das Feld der Typea-Stirnspitze zu verkapseln und eine Vorlage für die Anweisung zu erstellen. Die Anweisung wird für Endbenutzer konfigurierbar gehalten, um Optionen wie die JSON -Objekteigenschaften anzupassen, die als Teil der Vorschläge und das Modell im Bereich des Controllers angezeigt werden, das das ausgewählte Element enthält.
• Das Tutorial erläutert auch, wie die Linkfunktion der Anweisung aktualisiert und die Anweisung für die Verwendung konfiguriert wird. Das Endprodukt ist ein AngularJS -TypeA -Widget mit Konfigurationsoptionen, das mit CSS weiter angepasst werden kann. Der komplette Quellcode steht auf Github zum Download zur Verfügung.

Übersicht

In diesem Tutorial erstellen wir ein einfaches Widget der Typeaschite, das Vorschläge erzeugt, sobald jemand in ein Textfeld eintippt. Wir werden die App so architektieren, dass das Endprodukt sehr konfigurierbar ist und einfach in ein vorhandenes System angeschlossen werden kann. Die grundlegenden Schritte am Erstellungsprozess sind:

• Erstellen Sie eine Fabrik, die mit einer erholsamen API interagiert, und gibt JSON zurück, das für automatische vollständige Vorschläge verwendet wird.
• Erstellen Sie eine Direktive, die die JSON -Daten verwendet und das Feld der TypeAhead -Eingabe zusammenfasst.
• Halten Sie die Anweisung konfigurierbar, damit Endbenutzer die folgenden Optionen konfigurieren können.

Konfigurationsoptionen

1. Die genauen JSON -Objekteigenschaften, die als Teil der Vorschläge angezeigt werden sollen.
2. Das Modell im Bereich des Controllers, das das ausgewählte Element enthält.
3. Eine Funktion im Bereich des Controllers, der ausgeführt wird, wenn ein Element ausgewählt ist.
4. Ein Platzhaltertext (Eingabeaufforderung) für das Feld der TypeAhead -Eingabe.

Schritt 1: Erstellen einer Fabrik zum Erhalten von Daten

Lassen Sie uns als erster Schritt eine Fabrik erstellen, in der Angulars $ HTTP -Dienst verwendet wird, um mit erholsamen APIs zu interagieren. Schauen Sie sich den folgenden Snippet an:

<span>var typeAhead = angular.module('app', []);
</span>
typeAhead<span>.factory('dataFactory', function($http) {
</span>  <span>return {
</span>    <span>get: function(url) {
</span>      <span>return $http.get(url).then(function(resp) {
</span>        <span>return resp.data; // success callback returns this
</span>      <span>});
</span>    <span>}
</span>  <span>};
</span><span>});</span>

Der vorherige Code erstellt eine Fabrik namens DataFactory, die JSON -Daten von einer API abruft. Wir werden nicht auf die Details der Fabrik eingehen, aber wir müssen kurz verstehen, wie der $ HTTP -Dienst funktioniert. Sie übergeben eine URL an die Get () -Funktion, die ein Versprechen zurückgibt. Ein weiterer Anruf zu diesem Versprechen gibt auch ein weiteres Versprechen zurück (wir geben dieses Versprechen von der Fabrikfunktion der Fabrik zurück). Dieses Versprechen wird mit dem Rückgabewert des Erfolgsrückrufs gelöst, der an dann () übergeben wird. In unserem Controller interagieren wir also nicht direkt mit $ http. Stattdessen bitten wir um eine Instanz der Fabrik im Controller und rufen ihre Get () -Funktion mit einer URL auf. Unser Controller -Code, der mit der Fabrik interagiert, sieht also so aus:

typeAhead<span>.controller('TypeAheadController', function($scope<span>, dataFactory</span>) { // DI in action
</span>  dataFactory<span>.get('states.json').then(function(data) {
</span>    $scope<span>.items = data;
</span>  <span>});
</span>  $scope<span>.name = ''; // This will hold the selected item
</span>  $scope<span>.onItemSelected = function() { // this gets executed when an item is selected
</span>    <span>console.log('selected=' + $scope.name);
</span>  <span>};
</span><span>});</span>

Der vorherige Code verwendet einen API -Endpunkt namens States.json, der eine JSON -Liste von US -Staaten zurückgibt. Wenn die Daten verfügbar sind, speichern wir die Liste in den Umfangsmodellelementen. Wir verwenden auch den Modellnamen, um das ausgewählte Element zu halten. Schließlich wird die Funktion onItemSelected () ausgeführt, wenn der Benutzer einen bestimmten Status auswählt.

Schritt 2: Erstellen der Anweisung

Beginnen wir mit der unten gezeigten TypeAhehead -Anweisung.

typeAhead<span>.directive('typeahead', function($timeout) {
</span>  <span>return {
</span>    <span>restrict: 'AEC',
</span>    <span>scope: {
</span>      <span>items: '=',
</span>      <span>prompt: '@',
</span>      <span>title: '@',
</span>      <span>subtitle: '@',
</span>      <span>model: '=',
</span>      <span>onSelect: '&amp;'
</span>    <span>},
</span>    <span>link: function(scope<span>, elem, attrs</span>) {
</span>    <span>},
</span>    <span>templateUrl: 'templates/templateurl.html'
</span>  <span>};
</span><span>});</span>

In der Richtlinie erstellen wir einen isolierten Bereich, der mehrere Eigenschaften definiert:

• Elemente: Wird verwendet, um die JSON -Liste an den isolierten Bereich zu übergeben.
• Eingabeaufforderung: Ein Weg Bindung für die Übergabe von Platzhaltertext für das Feld der TypeAhead -Eingabe.
• Titel und Untertitel: Jeder Eintrag des automatischen vollständigen Feldes hat einen Titel und Untertitel. Die meisten Widgets der Typeakhead funktionieren auf diese Weise. Sie haben normalerweise (wenn auch nicht immer) zwei Felder für jeden Eintrag in den Dropdown -Vorschlägen. Wenn ein JSON -Objekt über zusätzliche Eigenschaften verfügt, wirkt sich dies als eine Möglichkeit, die beiden Eigenschaften zu übergeben, die in jedem Vorschlag im Dropdown angezeigt werden. In unserem Fall entspricht der Titel dem Namen des Staates, während Untertitel seine Abkürzung darstellt.
• Modell: Zwei -Wege -Bindung, um die Auswahl zu speichern.
• OnSelect: Methodenbindung, verwendet, um die Funktion im Controller -Bereich auszuführen, sobald die Auswahl vorbei ist.

HINWEIS: Ein Beispiel JSON -Antwort ist unten dargestellt:

<span>var typeAhead = angular.module('app', []);
</span>
typeAhead<span>.factory('dataFactory', function($http) {
</span>  <span>return {
</span>    <span>get: function(url) {
</span>      <span>return $http.get(url).then(function(resp) {
</span>        <span>return resp.data; // success callback returns this
</span>      <span>});
</span>    <span>}
</span>  <span>};
</span><span>});</span>

Schritt 3: Erstellen Sie die Vorlage

Lassen Sie uns nun eine Vorlage erstellen, die von der Richtlinie verwendet wird.

typeAhead<span>.controller('TypeAheadController', function($scope<span>, dataFactory</span>) { // DI in action
</span>  dataFactory<span>.get('states.json').then(function(data) {
</span>    $scope<span>.items = data;
</span>  <span>});
</span>  $scope<span>.name = ''; // This will hold the selected item
</span>  $scope<span>.onItemSelected = function() { // this gets executed when an item is selected
</span>    <span>console.log('selected=' + $scope.name);
</span>  <span>};
</span><span>});</span>

Zunächst rendern wir ein Eingabentextfeld, in dem der Benutzer eingeben wird. Die Eingabeaufforderung für den Umfang der Umfang wird dem Platzhalterattribut zugeordnet. Als nächstes durchlaufen wir die Liste der Zustände und zeigen den Namen und die Abkürzungseigenschaften an. Diese Eigenschaftsnamen werden über die Eigenschaften des Titel- und Untertitels -Umfangs konfiguriert. Die Richtlinien NG-Mausentrum und NG-Klasse werden verwendet, um den Eintrag hervorzuheben, wenn ein Benutzer mit der Maus schwebt. Als nächstes verwenden wir Filter: Modell, das die Liste durch den in das Eingangsfeld eingegebenen Text filtert. Schließlich haben wir die NG-Hide-Anweisung verwendet, um die Liste auszublenden, wenn entweder das Feld Eingabetxt leer ist oder der Benutzer ein Element ausgewählt hat. Die ausgewählte Eigenschaft ist in der Funktion "HandleSelection () auf TRUE eingestellt und auf false false (um die Liste der Vorschläge anzeigen) festgelegt, wenn jemand in das Eingabefeld eingreift.

Schritt 4: Aktualisieren Sie die Linkfunktion

Lassen Sie uns als nächstes die Linkfunktion unserer Anweisung wie unten gezeigt aktualisieren.

typeAhead<span>.directive('typeahead', function($timeout) {
</span>  <span>return {
</span>    <span>restrict: 'AEC',
</span>    <span>scope: {
</span>      <span>items: '=',
</span>      <span>prompt: '@',
</span>      <span>title: '@',
</span>      <span>subtitle: '@',
</span>      <span>model: '=',
</span>      <span>onSelect: '&amp;'
</span>    <span>},
</span>    <span>link: function(scope<span>, elem, attrs</span>) {
</span>    <span>},
</span>    <span>templateUrl: 'templates/templateurl.html'
</span>  <span>};
</span><span>});</span>

Die Funktionshandleselektion () aktualisiert die Eigenschaft von Scope, Modell, mit dem ausgewählten Statusnamen. Dann setzen wir die aktuellen und ausgewählten Eigenschaften zurück. Als nächstes nennen wir die Funktion Onselect (). Eine Verzögerung wird hinzugefügt, da das Zuordnungsbereich.Model = SelectedItem die Eigenschaft Bound Controller Scope nicht sofort aktualisiert. Es ist wünschenswert, die Rückruffunktion des Controller -Umfangs auszuführen, nachdem das Modell mit dem ausgewählten Element aktualisiert wurde. Aus diesem Grund haben wir einen $ Timeout -Service verwendet. Darüber hinaus werden die Funktionen iscurrent () und setCurrent () in der Vorlage zusammen verwendet, um Einträge im automatischen vollständigen Vorschlag hervorzuheben. Das folgende CSS wird auch verwendet, um den Highlight -Prozess abzuschließen.

<span>{
</span>  <span>"name": "Alabama",
</span>  <span>"abbreviation": "AL"
</span><span>}</span>

Schritt 5: Konfigurieren und verwenden Sie die Anweisung

Lassen Sie uns schließlich die Richtlinie in der HTML aufrufen, wie unten gezeigt.

<span><span><span><input</span> type<span>="text"</span> ng-model<span>="model"</span> placeholder<span>="{{prompt}}"</span> ng-keydown<span>="selected=false"</span> /></span>
</span><span><span><span><br</span>/></span>
</span>
<span><span><span><div</span> class<span>="items"</span> ng-hide<span>="!model.length || selected"</span>></span>
</span>  <span><span><span><div</span> class<span>="item"</span> ng-repeat<span>="item in items | filter:model  track by $index"</span> ng-click<span>="handleSelection(item[title])"</span> <span>style<span>="<span>cursor:pointer</span>"</span></span> ng-class<span>="{active:isCurrent($index)}"</span> ng-mouseenter<span>="setCurrent($index)"</span>></span>
</span>    <span><span><span><p</span> class<span>="title"</span>></span>{{item[title]}}<span><span></p</span>></span>
</span>    <span><span><span><p</span> class<span>="subtitle"</span>></span>{{item[subtitle]}}<span><span></p</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Schlussfolgerung

In diesem Tutorial wurde gezeigt, wie Sie ein AngularJS -TypeAwhead -Widget mit Konfigurationsoptionen erstellen. Der komplette Quellcode steht auf GitHub zum Download zur Verfügung. Fühlen Sie sich frei zu kommentieren, ob etwas unklar ist oder Sie etwas verbessern möchten. Vergessen Sie auch nicht, die Live -Demo zu überprüfen.

häufig gestellte Fragen zum Erstellen eines Typeakhead -Widgets mit AngularJS

Wie kann ich das Erscheinungsbild der Dropdown -Abgabe von TypeAheads anpassen? Sie können das Dropdown-Menü mit der Klasse .Dropdown-Menu ansprechen. Wenn Sie beispielsweise die Hintergrundfarbe und die Schriftfarbe ändern möchten, können Sie den folgenden CSS-Code verwenden:

.dropdown-menu {
Hintergrundfarbe: #f8f9fa;
Farbe: # 343A40;

Wie kann ich die Anzahl der Vorschläge im Dropdown-Bereich der TypeAhead einschränken? Dieses Attribut gibt die minimale Anzahl von Zeichen an, die eingegeben werden müssen, bevor die TypeAeAhe in die Kicks gestartet wird. Wenn Sie beispielsweise Vorschläge anzeigen möchten, nachdem der Benutzer 3 Zeichen eingegeben hat, können Sie den folgenden Code verwenden:

Wie kann ich eine Funktionsfunktionalität der Objektauswahl mit Typeneakhead verwenden? TypeAdhead können Sie das Attribut "typeAeAead-on-selektieren" verwenden. Mit diesem Attribut können Sie eine Funktion angeben, die aufgerufen werden soll, wenn eine Übereinstimmung ausgewählt ist. Die Funktion wird am ausgewählten Element übergeben. Zum Beispiel:

In Ihrem Controller können Sie die Einselektionsfunktion wie diese definieren :

$ scope.onSelect = Funktion (Element, Modell, Etikett) {
// Machen Sie etwas mit dem ausgewählten Element
};

Wie kann ich verwenden, wie ich verwenden kann, TypeAdhead mit Bootstrap in AngularJs? Dieses Modul bietet eine Reihe von AngularJS -Direktiven basierend auf dem Markup und CSS von Bootstrap. Die Typeakhead -Direktive kann wie folgt verwendet werden:

In diesem Beispiel sind Zustände eine Array of States, $ ViewValue ist der vom Benutzer eingegebene Wert, und Limitto: 8 begrenzt die Anzahl der Vorschläge auf 8.

Wie kann ich Typena -Kopf mit Remotedaten in verwenden AngularJS? Das TypeAhead -Attribut kann verwendet werden, um das Eingangsfeld an die abgerufenen Daten zu binden. Zum Beispiel:

$ scope.getStates = function (val) {
return $ http.get ('/api/States', {
Params: {

Name: Val }

}). Dann (Funktion (Antwort) {

return response.data.map (Funktion (Element) {

zurücksend item.name;
});
});
}; GetStates ($ ViewValue) "... />
In diesem Beispiel ist GetStates eine Funktion, die Zustände von einem Remote -Server basierend auf dem von der eingegebenen Wert abreißt Benutzer.

Das obige ist der detaillierte Inhalt vonErstellen eines Typeakhead -Widgets mit AngularJS - SitePoint. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!