AngularJs INTERFACE utilisateur typeahead match sur les personnages principaux

La typeahead fonctionnalité dans AngularJs UI semble simple et puissant toutefois, j'ai été à essayer de comprendre comment obtenir la correspondance à faire sur les personnages principaux. Par exemple, si je tape " A "dans la zone d'entrée, je voudrais voir tous les états qui commencent par "A" et pas tous les états qui contiennent un " A " dans le nom. J'ai été à la recherche pour un couple de jours et il semble que Angulaire est le concept d'un filtre personnalisé qui a un 'comparateur'. Les docs sur ce simple exemple qui ne montre pas la syntaxe exacte pour la mise en œuvre d'un comparateur.

Le code html ressemble à ceci:

<div>Selected: <span>{{selected}}</span></div>
    <div><input type="text" ng-model="selected" typeahead="name for name in states | filter:selected"></div>

Le code javascript de base ressemble à ceci

angular.module('firstChar', ['ui.bootstrap']);

    function TypeaheadCtrl($scope) {
        $scope.selected = undefined;
        $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
    }

J'ai un plunker ici http://plnkr.co/edit/LT6pAnS8asnpFEd5e6Ri

La difficulté consiste donc en un mot est d'obtenir le AngularUI typeahead pour correspondre uniquement sur les personnages principaux.

De l'aide ou des idées sur ce serait très apprécié.

InformationsquelleAutor pat capozzi | 2013-08-25

53

À la fin de la journée, votre question n'est pas vraiment spécifique à la typeahead directive, mais il a plus à voir avec la façon dont AngularJS les filtres de travail.

Avant de présenter une solution de travail veuillez noter que le typeahead directive fait un usage intensif de AngularJS infrastructure ($http, des promesses) et l'expression de la langue. Donc, il est important de réaliser que la states | filter:selected n'est rien de plus qu'un AngularJS expression.

Avoir un coup d'oeil à l'expression ci-dessus, nous avons besoin de trouver un moyen de de filtrage d'un tableau pour retourner une liste d'éléments correspondants. La seule chose de spécial à propos de la typeahead directive est qu'il y a un $viewValue variable représentant une valeur saisie par l'utilisateur dans la zone de saisie. Nous avons donc fondamentalement juste besoin de filtrer les states tableau à retourner les articles en commençant par le $viewValue.

Il existe de nombreuses façons de le faire, mais puisque vous avez mentionné le comparateur de filtres (veuillez noter que les personnes n'ont été introduites dans 1.1.x version d'AngularJS), vous devez définir un comparateur de fonction qui doit décider si un article doit être retourné dans la liste de résultats ou pas. Une telle fonction pourrait se présenter comme suit:
```
$scope.startsWith = function(state, viewValue) {
  return state.substr(0, viewValue.length).toLowerCase() == viewValue.toLowerCase();
} 
```
Avoir défini l'utilisation est très simple:
```
typeahead="name for name in states | filter:$viewValue:startsWith"
```
Ici est le travail plunk: http://plnkr.co/edit/WWWEwU4oPxvbN84fmAl0?p=preview
- WOW! Merci! Semble fonctionner parfaitement. Donne un bel exemple de concepts et de chaînage de syntaxe Angulaire.
- Une question cependant... Comment définir un "état" dans le startsWith fonction? Je réalise que c'est une itération à travers les états mais comment se fait-il avec le nom/objet "état". Je suis en train d'utiliser ce code dans un monde plus réel exemple et il ne fonctionne pas.
- La réponse à ma question, est que "l'état" dans l'exemple est la valeur actuelle de la matrice qui est utilisé pour remplir la typeahead liste. Mon problème est que je suis en utilisant un objet pour remplir la typeahead afin que je puisse obtenir le 'id' pour la valeur sélectionnée. Angulaire parcourt l'objet et le transmet à chacun des membres de l'objet à la fonction de comparaison à faire la comparaison de chaîne.
- Enfin, si vous voulez obtenir un 'id' et ont une autre valeur affichée c'est la syntaxe '<input type="text" ng-model="selected" typeahead="item.id de la rubrique.nom de l'élément dans les téléphones | filter:{nom: $viewValue}:phoneStartsWith">'
- Merci! C'est vraiment très utile de le Garder 🙂
- De cette façon, tous les états qui ne commencent pas avec la viewValue sont filtrés. Ok. Mais si je tiens à ajouter ces états de faire correspondre le viewValue de commencer sur un indice de plus de zéro? Comment dois-je procéder? Crois que je vais poster une autre question...
- Ici, il va: stackoverflow.com/questions/26893711/...
- Cette solution ne fonctionne pas pour moi, malheureusement. startsWith méthode elle-même n'est pas appelé. Je suis en utilisant AngularJS v1.0.7
- La Solution ne fonctionne pas pour moi sur angulaire 1.2.8 avec l'interface utilisateur.bootstrap 0.11
- Merci beaucoup pour votre réponse c'est exactement ce dont j'avais besoin et il fonctionne avec Angulaire 1.4.0-rc.1 et 1.4.7
- Je vais avoir des problème tout en utilisant http req pour la recherche ce n'est pas la mise à jour de la liste de suggestion, comme par réponse pour les premières recherche et un plus de problème avec la recherche comme si je tape "a" il de la liste de recherche qui ont de texte comme "amit, anshu, annu" après la première recherche que j'ai de type "n" au lieu de montrer de nouvelles de réponse, il suggère l'ancien nom qui, ayant "n" char comme "anshu, annu" et si je le recherche et tapez "n" de nouveau, il va montrer la bonne réponse, Alors, peut vous aider à expliquer pourquoi sa montrant la liste précédente, sur la deuxième de recherche et comment je peux le résoudre –
- Notez que vous voudrez probablement modifier la mise en évidence de filtre ainsi donc, cela ne fait que souligner le début de la chaîne. Le seul changement que vous devez faire est de supprimer l'indicateur g sur les regex dans le filtre existant (ligne 687 ici: github.com/angular-ui/bootstrap/blob/master/src/typeahead/...). Vous pouvez le faire à l'aide d'un décorateur, ou, si vous êtes en utilisant un custom modèle de résultats, vous pouvez spécifier votre nouveau soulignant filtre dans le modèle lui-même. voir ma réponse ici: stackoverflow.com/questions/36246579/...
InformationsquelleAutor pkozlowski.opensource

Filtre personnalisé pour obtenir la correspondance à faire sur les personnages principaux dans typehead l'auto-remplissage de la boîte.

JS:

(function() {

    //Create global filters using angular.filter() only. Never use local filters inside
    //controllers/services. This enhances testing and reusability.
    function xpTypeaheadFilter() {
          return function(items, props) {

            var out = [];
            
            if (angular.isArray(items)) {

              items.forEach(function(item) {
                
                


                var text = props.toLowerCase();
                var itemLoverCase =item.toLowerCase();
                var substr = itemLoverCase.substr(0, text.length);

                 
                if (substr === text ) {
                    
                     out.push(item);
                     
                }
                

              });
            } else {
              //Let the output be the input untouched
              out = items;
            }
            console.log("out lem", out.length);

            return out;
          };
    }

    //Pass functions into module methods rather than assigning a callback.
    //This helps aid with readability and helps reduced the amount of code "wrapped"
    //inside Angular.
    angular.module('common')
    .filter('xpTypeaheadFilter', xpTypeaheadFilter);
})();

HTML:

<input type="text" ng-model="vesselName" placeholder="Vessel Name" typeahead="vesselName for vesselName in vesselNames | xpTypeaheadFilter:$viewValue | limitTo:8"  class="form-control form-textbox" >

Isnt il n'y aucune directive option pour faire ce travail?

InformationsquelleAutor Rejayi CS

J'ai juste édité le post marqué comme réponse et il fonctionne lorsque la liste est d'avoir l'Id et le titre à la fois:

<input type="text" ng-model="ledgerstatementModel.Supplier" typeahead="supplier as supplier.Name for supplier in supplierList | filter:{Name:$viewValue}:startsWith" class="form-control">

et en js :

 $scope.startsWith = function (supplier, viewValue) {
        return supplier.substr(0, viewValue.length).toLowerCase() == viewValue.toLowerCase();
    }

InformationsquelleAutor vivek

Vous devez vous connecter pour publier un commentaire.