Création d'un widget Typeahead avec AngularJS - SitePoint

Si vous commencez un projet AngularJS, vous voudrez peut-être que tous les composants écrits en angulaire. Bien qu'il soit certainement possible de réutiliser les plugins jQuery existants, lancer un tas de jQuery à l'intérieur d'une directive n'est pas toujours la bonne façon de faire les choses. Mon conseil serait d'abord de vérifier si la même chose peut être implémentée avec Pure Angular d'une manière plus simple / meilleure. Cela maintient votre code d'application propre et maintenable. Ce tutoriel, ciblé vers les débutants, guide les lecteurs à travers la création d'un simple widget de typehead avec AngularJS.

Les plats clés

• Le tutoriel guide les lecteurs en créant un widget Typeahead avec AngularJS, qui fournit des suggestions en tant qu'utilisateur dans une zone de texte. Le widget est conçu pour être hautement configurable et facilement intégré dans les systèmes existants.
• Le processus consiste à construire une usine qui interagit avec une API RESTful et renvoie les données JSON pour les suggestions de réduction automatique, la création d'une directive pour encapsuler le champ de saisie de type type et la création d'un modèle pour la directive. La directive est maintenue configurable pour que les utilisateurs finaux puissent ajuster des options telles que les propriétés d'objet JSON à afficher dans le cadre des suggestions et le modèle de la portée du contrôleur qui contiendra l'élément sélectionné.
• Le tutoriel explique également comment mettre à jour la fonction de liaison de la directive et configurer la directive à utiliser. Le produit final est un widget Typeahead AngularJS avec des options de configuration, qui peuvent être personnalisés en utilisant CSS. Le code source complet est disponible en téléchargement sur github.

Présentation

Dans ce tutoriel, nous allons créer un simple widget Typeahead qui crée des suggestions dès que quelqu'un commence à taper dans une zone de texte. Nous architeserons l'application de telle manière que le produit final sera très configurable et peut facilement être branché sur un système existant. Les étapes de base impliquées dans le processus de création sont:

• Créez une usine qui interagit avec une API RESTful et renvoie JSON qui sera utilisée pour les suggestions complètes automatiquement.
• Créer une directive qui utilisera les données JSON et encapsulera le champ de saisie de type Typea.
• Gardez la directive configurable afin que les utilisateurs finaux puissent configurer les options suivantes.

Options de configuration

1. les propriétés d'objet JSON exactes à afficher dans le cadre des suggestions.
2. Le modèle de la portée du contrôleur qui maintiendra l'élément sélectionné.
3. Une fonction dans la portée du contrôleur qui s'exécute lorsqu'un élément est sélectionné.
4. Un texte d'espace réservé (invite) pour le champ de saisie de type tact.

Étape 1: Construire une usine pour obtenir des données

En tant que première étape, créons une usine qui utilise le service $ http d'Angular pour interagir avec les API RESTful. Jetez un œil à l'extrait suivant:

<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>

Le code précédent crée une usine appelée DataFactory qui récupère les données JSON d'une API. Nous n'entrerons pas dans les détails de l'usine, mais nous devons comprendre brièvement le fonctionnement du service $ http. Vous transmettez une URL à la fonction get (), qui renvoie une promesse. Un autre appel à alors () sur cette promesse renvoie également une autre promesse (nous renvoyons cette promesse de la fonction get () de l'usine). Cette promesse est résolue avec la valeur de retour du succès transmis à alors (). Donc, à l'intérieur de notre contrôleur, nous n'interagissons pas directement avec $ http. Au lieu de cela, nous demandons une instance d'usine dans le contrôleur et appelons sa fonction get () avec une URL. Ainsi, notre code de contrôleur qui interagit avec l'usine ressemble à ceci:

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>

Le code précédent utilise un point de terminaison API appelé states.json qui renvoie une liste JSON des États américains. Lorsque les données sont disponibles, nous stockons la liste dans les éléments du modèle de portée. Nous utilisons également le nom du modèle pour maintenir l'élément sélectionné. Enfin, la fonction OnItemSelected () est exécutée lorsque l'utilisateur sélectionne un état particulier.

Étape 2: Création de la directive

Commençons par la directive Typeahead, illustrée ci-dessous.

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>

Dans la directive, nous créons une portée isolée qui définit plusieurs propriétés:

• Éléments: utilisés pour passer la liste JSON à la portée isolée.
• Invite: liaison à sens unique pour le passage du texte de l'espace réservé pour le champ de saisie de type Typea.
• Titre et sous-titre: Chaque entrée du champ complet complet a un titre et un sous-titre. La plupart des widgets Typeahead fonctionnent de cette façon. Ils ont généralement (sinon toujours) deux champs pour chaque entrée dans les suggestions déroulantes. Si un objet JSON a des propriétés supplémentaires, cela agit comme un moyen de passer les deux propriétés qui seront affichées dans chaque suggestion de la liste déroulante. Dans notre cas, le titre correspond au nom de l'État, tandis que le sous-titre représente son abréviation.
• Modèle: liaison bidirectionnelle pour stocker la sélection.
• onSelect: liaison de la méthode, utilisée pour exécuter la fonction dans la portée du contrôleur une fois la sélection terminée.

Remarque: un exemple de réponse JSON est illustré ci-dessous:

<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>

Étape 3: Créez le modèle

Maintenant, créons un modèle qui sera utilisé par la directive.

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>

Tout d'abord, nous rendons un champ de texte d'entrée où l'utilisateur tapera. L'invite de propriété de portée est affectée à l'attribut d'espace réservé. Ensuite, nous parcourons la liste des états et affichons les propriétés du nom et de l'abréviation. Ces noms de propriétés sont configurés via les propriétés du titre et des sous-titres. Les directives NG-MouseEnter et NG-Class sont utilisées pour mettre en évidence l'entrée lorsqu'un utilisateur plane avec la souris. Ensuite, nous utilisons Filtre: Model, qui filtre la liste par le texte entré dans le champ de saisie. Enfin, nous avons utilisé la directive NG-Hide pour masquer la liste lorsque le champ de texte d'entrée est vide ou que l'utilisateur a sélectionné un élément. La propriété sélectionnée est définie sur true à l'intérieur de la fonction handleselection () et définie sur False False (pour afficher la liste des suggestions) lorsque quelqu'un commence à taper dans le champ de saisie.

Étape 4: Mettez à jour la fonction de lien

Ensuite, mettons à jour la fonction de lien de notre directive comme indiqué ci-dessous.

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>

La fonction mancheleselection () met à jour la propriété Scope, modèle, avec le nom de l'état sélectionné. Ensuite, nous réinitialisons les propriétés actuelles et sélectionnées. Ensuite, nous appelons la fonction onSelect (). Un délai est ajouté car l'affectation Scope.Model = SelectedItem ne met pas immédiatement à jour la propriété de portée du contrôleur lié. Il est souhaitable d'exécuter la fonction de rappel de la portée du contrôleur après la mise à jour du modèle avec l'élément sélectionné. C’est la raison pour laquelle nous avons utilisé un service de temps mort $. De plus, les fonctions isCurrent () et setCurrent () sont utilisées ensemble dans le modèle pour mettre en évidence les entrées de la suggestion complète automatique. Le CSS suivant est également utilisé pour terminer le processus de surbrillance.

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

Étape 5: Configurez et utilisez la directive

Enfin, appelons la directive dans le HTML, comme indiqué ci-dessous.

<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>

Conclusion

Ce tutoriel vous a montré comment créer un widget Typeahead AngularJS avec des options de configuration. Le code source complet est disponible en téléchargement sur github. N'hésitez pas à commenter si quelque chose n'est pas clair ou si vous voulez améliorer quoi que ce soit. N'oubliez pas non plus de consulter la démo en direct.

Des questions fréquemment posées sur la création d'un widget Typeahead avec AngularJS

Comment puis-je personnaliser l'apparence de la liste déroulante Typeahead?

La personnalisation de l'apparence de la liste déroulante Typeahead peut être réalisée en utilisant CSS. Vous pouvez cibler le menu déroulant en utilisant la classe .Dropdown-menu. Par exemple, si vous souhaitez modifier la couleur de l'arrière-plan et la couleur de la police, vous pouvez utiliser le code CSS suivant:

.Dropdown-menu {
background-Color: # f8f9fa;
couleur: # # 343A40;
}
N'oubliez pas d'inclure ce CSS dans votre fichier CSS principal ou dans les balises dans votre fichier html.

Comment puis-je limiter le nombre de suggestions dans la liste déroulante Typeahead?

limitant le nombre de suggestions dans la liste déroulante Typeahead peut être effectuée en utilisant l'attribut Typeahead-Min-Lingment. Cet attribut spécifie le nombre minimum de caractères qui doivent être entrés avant que Typeahead ne commence à se lancer.

comment puis-je utiliser une fonctionnalité de sélection d'objets avec TypeAl?

pour utiliser une fonctionnalité de sélection d'objets avec Typeahead, vous pouvez utiliser l'attribut Typeahead-on-Select. Cet attribut vous permet de spécifier une fonction à appeler lorsqu'une correspondance est sélectionnée. La fonction sera transmise l'élément sélectionné. Par exemple:

$ scope.onselect = fonction (élément, modèle, étiquette) {
// faire quelque chose avec l'élément sélectionné
};

comment puis-je utiliser Typeahead avec bootstrap dans AngularJS?

Pour utiliser Typeahead avec bootstrap dans AngularJS, vous devez inclure le module UI.bootstrap dans votre application AngularJS. Ce module fournit un ensemble de directives AngularJS basées sur le balisage de bootstrap et le CSS. La directive Typeahead peut être utilisée comme suit:

Dans cet exemple, les états sont un tableau d'états, $ ViewValue est la valeur saisie par l'utilisateur et limite: 8 limite le nombre de suggestions à 8.

comment puis-je utiliser la tact avec des données distantes en Angularjs?

Pour utiliser Typeahead avec des données distantes dans AngularJS, vous pouvez utiliser le service $ http pour récupérer les données d'un serveur distant. L'attribut Typeahead peut être utilisé pour lier le champ de saisie aux données récupérées. Par exemple:

$ scope.getStates = fonction (val) {

return $ http.get ('/ api / states', {
params: {
name: val
}
}). Puis (fonction (réponse) {
return réponse.data.map (fonction (item) {
return item.name;
});
});
};
Dans votre html, vous pouvez utiliser la fonction GetStates comme ceci:


Dans cet exemple, GetStates est une fonction qui récupère les états à partir d'un serveur distant en fonction de la valeur saisie par le utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!