清除角引导输入中的选定输入答案

【问题标题】：Clear selected input in angular bootstrap typeahead清除角引导输入中的选定输入
【发布时间】：2014-03-17 06:02:06
【问题描述】：

我使用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();
  }
}

http://plnkr.co/edit/roushmavR67rhXTJNc8K?p=preview

【问题讨论】：

标签： javascript jquery angularjs twitter-bootstrap bootstrap-typeahead

【解决方案1】：

预先输入的目的是提示可能的选择，但也允许非选择（默认情况下）。您尝试做的基本上只是一个选择框：

<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)"

Example plunkr

【讨论】：