Angular JS - Automatiquement la mise au point d'entrée et de montrer typeahead déroulant - l'interface utilisateur.bootstrap.typeahead

Mise à jour:

J'ai ajouté de la directive github pour faciliter les mises à jour et d'accès.
Vous pouvez maintenant installer en tant que dépendance à travers la charmille.

Original post:

Je suis venu avec une assez propre hack qui ne pas nécessite aucune modification de l'interface utilisateur-bootstrap-npt. L'Idée est d'utiliser $setViewValue() pour déclencher la fenêtre contextuelle avec une combinaison d'un filtre spécial comparateur de fonction.

Afin de contourner le minLength vérifier, $setViewValue() doit être réglé à une valeur supérieure à 1, donc je suis en utilisant un espace de chaîne. Le rôle du comparateur la fonction est de traiter les un espace comme une correspondance à tous les éléments de sorte qu'ils apparaîtront lorsque vous cliquez sur une entrée vide.

J'ai créé une directive simple:

angular.module('app')
.directive('typeaheadFocus', function () {
return {
require: 'ngModel',
link: function (scope, element, attr, ngModel) {
//trigger the popup on 'click' because 'focus'
//is also triggered after the item selection
element.bind('click', function () {
var viewValue = ngModel.$viewValue;
//restore to null value so that the typeahead can detect a change
if (ngModel.$viewValue == ' ') {
ngModel.$setViewValue(null);
}
//force trigger the popup
ngModel.$setViewValue(' ');
//set the actual value in case there was already a value in the input
ngModel.$setViewValue(viewValue || ' ');
});
//compare function that treats the empty space as a match
scope.emptyOrMatch = function (actual, expected) {
if (expected == ' ') {
return true;
}
return actual.indexOf(expected) > -1;
};
}
};
});

Utilisation:

<input type="text" ng-model="selected" typeahead="item for item in items | filter:$viewValue:emptyOrMatch | limitTo:8" typeahead-focus >

Maintenant, comme je n'ai pas assez de réputation pour le commentaire, je dois écrire une nouvelle réponse à avertir les gens runTarm la réponse ci-dessus. C'est une solution viable, mais il court le risque de tomber sur l'erreur suivante:

Error: [$rootScope:inprog] $apply already in progress

Ce qui semble être due à ng-l'accent étant une épreuve synchronisée (voir la discussion ici). Au lieu de cela, on peut utiliser le ng-click-attribut, et que cette erreur ne se produit pas.

Aussi, j'ai vérifié que

$element.triggerHandler('input');

fonctionne tout aussi bien que le jQuery-déclencheur dans runTarm de réponse.

Je voulais quelque chose comme l'OP de la description et la seule solution que j'ai trouvé était à venir avec un modèle qui combine le menu déroulant et typeahead directives - peut-être l'OP ou de quelqu'un d'autre va le trouver utile:

JS:

angular.module('app', ['ui.bootstrap'])
.controller('AppCtrl', function($scope) {
$scope.model;
$scope.options = [{label:'Option 1'}, {label:'Option 2'}, {label:'Option 3'}];
$scope.onSelect = function($item, $model, $label) {
$scope.model = angular.copy($item);
}
});

HTML:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<div ng-app='app' style='padding:10px'>
<div ng-controller='AppCtrl'>
<div class='dropdown' dropdown style='width:200px'>
<!-- This needs UI Bootstrap 0.12 to work -->
<div class='input-group'>
<input type='text' class='form-control' ng-model='model.label' typeahead="op.label for op in options | filter:$viewValue | limitTo:8" typeahead-editable='false' />
<span class='input-group-btn'>
<button class='btn btn-default dropdown-toggle' dropdown-toggle>
<span class='caret'></span>
</button>
</span>
</div>
<ul class="dropdown-menu" role='menu' style='max-height:200px;overflow-y:scroll'>
<li ng-repeat='op in options'>
<a href ng-click='onSelect(op)'>{{op.label}}</a>
</li>
</ul>
</div>
</div>
</div>

Bien sûr, vous pouvez simplifier pour rendre les options juste un tableau de chaînes de caractères - j'ai fait d'eux des objets parce que c'était plus proche de ce dont j'avais besoin.

J'ai résolu ce problème par le biais d'une directive. Lorsque vous utilise cette directive, montre la liste sans filtre ensuite, vous tapez votre recherche pour trouver un élément.

angular.module('myapp')
.directive('typeaheadLikeSelect', 
['$parse',function($parse) {
return {
require: 'ngModel',
link: function (scope, element, attr, ngModel){
var aux_modelValue, aux_viewValue,
modelGetter = $parse(attr.ngModel),
modelSetter = modelGetter.assign;
var noViewValue = function(){
return
ngModel.$$lastCommittedViewValue === undefined ||
!ngModel.$$lastCommittedViewValue.trim();
};
var forceEvent = function(){
ngModel.$setViewValue();
ngModel.$viewValue = ' ';
ngModel.$setViewValue(' ');
ngModel.$render();
scope.$apply();
element.val(element.val().trim());
};
element.on('mousedown', function(e){
e.stopPropagation();
forceEvent();
});
element.on('blur', function(e){
e.stopPropagation();
if(aux_modelValue){
modelSetter(scope, aux_modelValue);
scope.$apply();
}
});
scope.$watch(function () {
return ngModel.$modelValue;
}, function(newValue, oldValue){
if(newValue || (!newValue && !oldValue))
aux_modelValue = newValue;
});
}
};
}]);

Je laisse un point de vue code, pour tester le code ci-dessus.

<script type="text/ng-template" id="customTemplate.html">
<a>
<span ng-bind-html="match.label.description | uibTypeaheadHighlight:query"></span>
</a>
</script>
<div class="form-group has-feedback" ng-class="{'has-success':items.mymodel}">
<input
placeholder="typeahead"
ng-model="items.mymodel"
uib-typeahead="responses as responses for responses in getResponses($viewValue)"
typeahead-template-url="customTemplate.html"
typeahead-input-formatter="$model.description"
typeahead-loading="loadingResponses"
typeahead-no-results="noResponses"
typeahead-editable="false"
typeahead-on-select="changeItem($item)"
class="form-control"
required="required"
typeahead-like-select>
<div ng-show="noResponses">
<i class="glyphicon glyphicon-remove"></i> No Results Found
</div>
<span ng-show="!items.mymodel" class="glyphicon glyphicon-search form-control-feedback" aria-hidden="true"></span>
<span ng-show="items.mymodel" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
</div>

Ce que nous voulons est de trigger('input') sur l'élément d'entrée lorsqu'il est porté.

La façon correcte de le faire dans Angulaire est de le faire dans une directive.

angular.module('app')    
.directive('showList', function() {
return {
restrict: 'A',
link: function(scope, iEle) {
iEle.focus(function() {
iEle.trigger('input');
});
}
};
});

D'utilisation de cette directive sur la typeahead d'entrée de l'élément de

<input show-list uib-typeahead="state for state in states | filter:$viewValue" typeahead-min-length="0" class="form-control">