我正在使用http://angular-ui.github.io/bootstrap/#/typeahead作为简单的数组查找示例。
我想list()在我清空该input字段并按Enter时触发。目前，我可以编写另一个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>
Java脚本
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内部变量：
控制器添加：
$scope.testAllowed = function( evt ){
if( evt.keyCode === 13 &&
$scope.selected &&
$scope.states.indexOf( $scope.selected ) < 0){
$scope.selected = '';
}
}
输入html附加内容：
ng-keypress="testAllowed($event)"
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句