Klar ausgewählte Eingang in angular bootstrap typeahead
Ich bin mit http://angular-ui.github.io/bootstrap/#/typeahead für ein einfacher array-lookup-Beispiel.
Möchte ich auslösen list()
wenn ich leere die input
Feld und drücken Sie die EINGABETASTE. Derzeit könnte ich ein anderes Programm Clear
- Taste, um dies zu tun. Aber wie keypress, wenn die Eingabe leer ist? Ich möchte Benutzer wählen Sie aus der Liste oder deaktivieren Sie es nur. Es sollten keine anderen Werte.
HTML
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script type="text/ng-template" id="customTemplate.html">
< a > < img ng - src = "http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}"
width = "16" > < span bind - html - unsafe = "match.label | typeaheadHighlight:query" > < /span>
</a >
</script>
<div class='container-fluid' ng-controller="TypeaheadCtrl">
<h4>Static arrays</h4>
<pre>Model: {{selected | json}}</pre>
<input type="text" typeahead-on-select="list()" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
<button ng-click="clear()">Clear</button>
</div>
</body>
</html>
Javascript
angular.module('plunker', ['ui.bootstrap']);
function TypeaheadCtrl($scope, $http) {
$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'];
$scope.list = function() {
alert($scope.selected);
}
$scope.clear = function() {
$scope.selected = undefined;
$scope.list();
}
}
http://plnkr.co/edit/roushmavR67rhXTJNc8K?p=preview
Du musst angemeldet sein, um einen Kommentar abzugeben.
Den Zweck der typeahead geben Hinweise auf mögliche Auswahl, aber denen die nicht-Auswahl als auch (standardmäßig sowieso). Was Sie zu tun versuchen ist im Grunde nur eine select-box:
Aber wenn Sie wollen, um dies zu simulieren wählen Sie box-Idee mit erlauben, nur die Optionen wählen, die in eine typeahead dann müssen Sie die Verwendung der ng-keypress-Richtlinie und übergeben $event-interne variable:
Controller-Zusatz:
Input html Zusatz:
Beispiel plunkr