我正在使用 http://angular-ui.github.io/bootstrap/#/typeahead一个简单的数组查找示例。
我想在清空 input 字段并按回车键时触发 list()。目前我可以编写另一个 Clear 按钮来执行此操作。但是当输入为空时如何允许按键？我希望用户从列表中选择或仅清除它。不应有其他值。
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();
}
}
最佳答案
预先输入的目的是提示可能的选择，但也允许不选择(默认情况下)。您尝试做的实际上只是一个选择框:
<select ng-options='state for state in states'></select>
但是如果你确实想模拟这个选择框的想法，只允许预先输入选择选项，那么你需要使用 ng-keypress 指令并传递 $event 内部变量:
Controller 添加:
$scope.testAllowed = function( evt ){
if( evt.keyCode === 13 &&
$scope.selected &&
$scope.states.indexOf( $scope.selected ) < 0){
$scope.selected = '';
}
}
输入html添加:
ng-keypress="testAllowed($event)"
关于javascript - 在 angular bootstrap typeahead 中清除选定的输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22447881/