angularjs - open - ui bootstrap tpls 2.5 0

Angular-UI typeahead: muestra la etiqueta pero se une solo al valor

Question

Estoy usando typeAhead de UI angular de la siguiente manera:

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

enlazado a un modelo como:

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

Muestra correctamente el texto de opciones, pero cuando selecciono un elemento, muestra dentro del cuadro de texto el valor. El modelo está delimitado correctamente al valor solamente (no a todo el objeto modelo).

¿Es posible mostrar dentro del cuadro de texto el "texto" (no el "valor") después de la selección, manteniendo la vinculación del modelo solo en el valor (es decir, cuando selecciono un cierto "texto" el modelo se actualiza con el "valor" )?

Answer 1

Aquí un formateador abreviado para todos los que usan lodash o subrayado:

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

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

Answer 2

Bueno, hasta ahora encontré una posible solución a través de directivas.

HTML

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

DIRECTIVA

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; 
            });
        }
    };  
});

Bueno ... obviamente esto es solo un truco ... Me gustaría saber si existe una manera más limpia y natural de hacerlo ... sin modificar el código o usar directivas ...

Answer 3

Intenta cambiar tu código de

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

a

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

Answer 4

No es ideal, pero el atributo typeahead-input-formatter proporciona una solución alternativa hasta que se pueda proporcionar una solución. ( Plunker de hilo github ).

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)" 
/>

Función del controlador 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;
     }
   }
};

Answer 5

Puedes intentar hacer lo que se sugiere pero con typeahead-on-select como tal

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

Esto asegurará que se muestre el texto o la etiqueta, pero se cambia el valor subyacente.

Answer 6

para mí esto:

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

en lugar de:

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

fue realmente útil

tuve un JSON hecho así:

[{"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">

y terminó en algo así como tener el menú desplegable con solo el valor de RagioneSociale y un modelo donde puedo ver tanto el texto como el ID e imprimirlos con un {{asyncSelected}} normal