提前清除角度引導中的選定輸入

Question

我正在使用http://angular-ui.github.io/bootstrap/#/typeahead作為簡單的數組查找示例。

當我清空input字段並按Enter時，我想觸發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

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

例子plunkr

提前清除角度引導中的選定輸入

問題描述

1 個解決方案

解決方案1
1 已采納 2014-03-17 06:20:12

提前清除角度引導中的選定輸入

問題描述

1 個解決方案

解決方案1 1 已采納 2014-03-17 06:20:12

解決方案1
1 已采納 2014-03-17 06:20:12