web-dev-qa-db-fra.com

Tête de frappe Angular-UI: affiche le libellé mais se lie uniquement à la valeur

J'utilise Angular-UI typeahead de la manière suivante:

<input type="text" ng-model="myModel" typeahead="o.value as o.text for o in options | filter:$viewValue | limitTo:5" typeahead-editable="false" />

lié à un modèle comme:

var options = [
    {"value": 1, "text": "value1"},
    {"value": 2, "text": "value2"},
    ...
];

Il affiche correctement le texte des options, mais lorsque je sélectionne un élément, il affiche à l'intérieur de la zone de texte la valeur. Le modèle est correctement limité à la valeur uniquement (pas à l'ensemble de l'objet modèle).

Est-il possible d'afficher à l'intérieur de la zone de texte le "texte" (pas la "valeur") après la sélection, tout en maintenant la liaison du modèle à la seule valeur (c'est-à-dire: lorsque je sélectionne un certain "texte" le modèle est mis à jour avec la "valeur") )?

angularjsangular-uiangular-ui-typeahead
51
Matteo Piazza

Ce n'est pas idéal, mais l'attribut typeahead-input-formatter fournit une solution de contournement jusqu'à ce qu'un correctif puisse être fourni. ( Plunker à partir de github thread).

HTML:

<input type="text" 
       ng-model="myModel" 
       typeahead="o.value as o.text for o in options | filter:$viewValue | limitTo:5" 
       typeahead-editable="false" 
       typeahead-input-formatter="formatLabel($model)" 
/>

Fonction du contrôleur AngularJs:

$scope.formatLabel = function(model) {
   for (var i=0; i< $scope.options.length; i++) {
     if (model === $scope.options[i].value) {
       return $scope.options[i].text;
     }
   }
};
49
krimhorn

Essayez de changer votre code de

typeahead="o.value as o.text for o in options | filter:$viewValue | limitTo:5"

à

typeahead="o as o.text for o in options | filter:$viewValue | limitTo:5"
28
UmaKiran

Vous pouvez essayer de faire comme suggéré, mais avec typeahead-on-select comme

<input type="text" 
       ng-model="myModel" 
       typeahead="o as o.text for o in options | filter:$viewValue | limitTo:5" 
       typeahead-editable="false" 
       typeahead-on-select="model=$item.value"
/>

Cela garantira que le texte ou l'étiquette est affiché mais que la valeur sous-jacente est modifiée.

10
domenicr

Voici un formateur de sténographie pour tous ceux qui utilisent lodash ou underscore:

function formatTypehead(array,id){
  var o = _.find(array,{id:id});
  return (o?o.displayName || id:id);
}

et html:

<input  type="text" 
  uib-typeahead="s.id as s.displayName for s in companies | filter:$viewValue | limitTo:8"
  typeahead-input-formatter="formatTypehead(companies, $model)"
  ng-model="model.company"
  >
3
Simon Fakir

Eh bien, jusqu'à présent, j'ai trouvé une solution possible grâce à des directives.

HTML

<div my-autocomplete my-autocomplete-source="element" my-autocomplete-model="obj[element.model]"></div>

DIRECTIF

app.directive('myAutocomplete', function() {
    return {    
        restrict: 'A',
        replace: true,
        template: '<input type="text" name="{{myAutocompleteSource.model}}" placeholder="{{myAutocompleteSource.label}}" ng-model="selected" typeahead="o as o.text for o in myAutocompleteSource.options | filter:$viewValue | limitTo:5" typeahead-editable="false" />',
        scope: {
            myAutocompleteSource: '=',
            myAutocompleteModel: '='
        },
        controller: function($scope) {
            $scope.selected = null;
            $scope.$watch('selected', function() { 
                $scope.myAutocompleteModel = ($scope.selected && 'value' in $scope.selected) ? $scope.selected.value : null; 
            });
        }
    };  
});

Eh bien ... évidemment, ce n'est qu'une astuce ... J'aimerais savoir s'il existe un moyen plus propre et plus naturel de le faire ... sans modifier le code ou utiliser la directive ...

1
Matteo Piazza

pour moi ceci:

uib-typeahead="o as o.RagioneSociale for o in main.getLocation($viewValue)"

au lieu de:

typeahead="o as o.RagioneSociale for o in main.getLocation($viewValue)"

était vraiment utile

j'ai fait un json comme ça:

[{"RagioneSociale":"Politi Real Estate sas","IDAnagrafica":"2516"},{"RagioneSociale":"COND METROPOLITAN","IDAnagrafica":"4325"}]


Model: {{asyncSelected | json}}
<input type="text" ng-model="asyncSelected" uib-typeahead="o as o.RagioneSociale for o in main.getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control">

et cela a abouti à quelque chose comme avoir le menu déroulant avec juste la valeur RagioneSociale et un modèle où je peux voir à la fois le texte et l'identifiant et les imprimer avec un {{asyncSelected}} normal

0
Gio Venice