retorno de chamada de typeahead angular do ui-bootstrap no selectMatch?


92

Estou usando o tipo angular ui-bootstrap adiantado e gostaria de usá-lo como uma forma de escolher muitas opções, então precisaria obter o valor selecionado quando o método selectMatch for iniciado, mas não consigo encontrar como fazer isso no meu controlador

<div class='container-fluid' ng-controller="TypeaheadCtrl">
<pre>Model: {{selected| json}}</pre>
<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue">

Se eu observar o valor selecionado, tenho a alteração toda vez que uma tecla é pressionada ...

scope.$watch('selected', function(newValue, oldValue) {... });

Percebi que o método selectMatch é aquele que é chamado quando o usuário pressiona enter ou clica na lista, mas não sei como ter um retorno de chamada para isso ...

Obrigado !

Respostas:


250

Existe uma maneira melhor de fazer isso agora. Um novo método de retorno de chamada foi adicionado

No arquivo do controlador, adicione o seguinte:

 $scope.onSelect = function ($item, $model, $label) {
    $scope.$item = $item;
    $scope.$model = $model;
    $scope.$label = $label;
};

Em vista, adicione o seguinte:

 <input type="text"
        ng-model="selected"
        typeahead="state for state in states | filter:$viewValue"
        typeahead-editable="false"
        typeahead-on-select="onSelect($item, $model, $label)"/>

Consulte a especificação do tipo antecipado para obter mais informações (pesquise onSelect).

Verifique se os seguintes URLs ajudam http://www.techguides.in/how-to-create-autocomplete-using-angularjs-ui/

http://www.techguides.in/how-to-customize-autocomplete-to-display-multiple-columns-using-angularjs-ui-2/


2
Obrigado! Funcionou como um encanto. Isso provavelmente deve ser documentado oficialmente na página de referência sob o título Typeahead
ariestav

29
Alguém tem uma ideia do que os objetos $ item $ model $ label realmente são naquele tipo de retorno de chamadaeahead-on-select = 'onSelect ($ item, $ model, $ label)'?
AardVark71

@Matt, há alguma forma de postback usando $ http com o evento onSelect?
Pratik Gaikwad de

15
@ AardVark71 $ item $ model $ label essas três propriedades são as seguintes, respectivamente. Se você estiver associando um array JSON de objetos com mais de uma propriedade, obterá o item selecionado em $ item com todas as propriedades. $ model é o modelo angular embutido usado que armazenará o item.value selecionado e $ lable fornecerá o valor exibido na caixa de texto após a seleção. Resumindo, muitas vezes, $ label será igual a $ model. Espero que isso esclareça sua dúvida.
Pratik Gaikwad

16
@ AardVark71 É mais fácil explicar se a expressão é como: state.id as state.name for state in states. Nesse caso $itemé state, $ model is state.id, and $labelisstate.name
Aximili,

10

Edit: este método não é o melhor agora. É melhor usar o retorno de chamada onSelect conforme explicado na resposta acima.

Descobri como fazer o que queria. Eu vi que há um atributo editável do tipo antecipado e, se for definido como falso, o valor selecionado muda apenas quando um valor do modelo é selecionado. E assim o $ watch está funcionando bem para verificar quando um novo valor é selecionado.

<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue" typeahead-editable="false">

link: function(scope, elm, attrs){
    scope.$watch('selected', function(newValue, oldValue) {
        if (newValue)
          console.log(oldValue+"->"+newValue);
     });
}

2

A seguir deve estar o seu HTML

 <input id="title" type="text"  ng-model="title"  typeahead="data.enquiry_title for data in titleData | filter:$viewValue | limitTo:8" 
typeahead-on-select='onSelect($item, $model, $label)' />

basta adicionar typeahead-on-select na tag de entrada com a função de retorno de chamada.

A seguir iria entrar no controlador

$scope.onSelect = function ($item, $model, $label) {
            console.log($item);
            if($item.tid)
                $scope.activeTitleId = $item.tid
        };

dentro de $ item você terá todo o objeto que você passou no array principal da lista de sugestões


0

tente o seguinte antes da validação

 modelCtrl.$setValidity('editable', true);
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.