下拉菜单和输入字段使用Angular一起工作

Question

我有一个下拉按钮和一个输入字段。如果单击该按钮，则会显示名称列表（以JSON编写）。我想添加以下内容，但我不知道该怎么做：

• 选择名称时，我希望它出现在输入字段中。
• 在输入字段中写入时，我希望显示列表（结果与该字母对应）。

我更愿意尽可能多地使用角度，但当然我需要常规的javascript或JQuery也很好。如果您有疑问，请告诉我。

<div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle"
        data-toggle="dropdown" aria-expanded="false">
                 Name <span class="caret"></span>
        </button>
                <ul class="dropdown-menu" role="menu">
                        <li ng-repeat="x in Person">{{x.name }}</li>

                </ul>
   </div>
<input type="text" class="form-control" aria-label="...">

Answer 1

您可以使用angularStrap typeahead：http://mgcrea.github.io/angular-strap/#/typeaheads

Answer 2

您可以在ng-repeat上使用过滤器在输入时输入选项，如下所示：

<div ng-controller="MainCtrl" class="container">
 <div class="input-group">
      <div class="input-group-btn">
        <button type="button" id="dropdown1" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Name <span class="caret"></span></button>
        <ul aria-labelledby="dropdown1" class="dropdown-menu" role="menu">
          <li ng-repeat="person in persons | filter:selectedPerson"><a ng-click="selectPerson(person)">{{person}}</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input id="personInput" ng-model="selectedPerson" ng-change="toogleDropdown()" type="text"  class="form-control">
    </div><!-- /input-group -->
</div>

控制器

app.controller('MainCtrl', function ($scope) {

$scope.selectedPerson = "";

$scope.toogleDropdown = function(){
    if($scope.selectedPerson.length>3){
        $('#dropdown1').dropdown('toggle');
    }
    $('#personInput').focus();
}

$scope.selectPerson = function(person){
    $scope.selectedPerson = person;
}

$scope.persons = ['donald','polsie'];
});

Heres a JSFiddle