Question

我是AngularJS的菜鸟。作为一个学习练习，我正在创建一个预先控制。

预先输入包含一个用于过滤选项的文本框，一个用于显示列表中选项菜单的无序列表，以及一个用于手动切换列表的显示/隐藏按钮。

文本框使用ng-repeat过滤li元素。从列表中选择li项目时，我使用所选值填充文本框，然后隐藏列表。

<div class="xtab-typeahead" ng-controller="xTabTypeAheadCtrl">

  <input type="text" class="xtab-typeahead-search" placeholder="{{type}}" ng-model="query.id" ng-focus="showMenu()" ng-init="query.id = undefined" />
  <button ng-click="toggleMenu()">Show/Hide</button>

  <ul class="xtab-typeahead-menu" ng-class="{true:'active',false:''}[isActive]">
    <li ng-repeat="item in menuItems | filter:query" 
        ng-click="hideMenu(); query.id = item.id">
      {{item.id}}
    </li>
  </ul>

</div>

我的问题是，当值被分配给文本框时，在隐藏菜单之前，列表会暂时过滤到所选的一个选项（因为文本框也是ng重复过滤器的来源）。我希望id为菜单隐藏而不首先使用过滤器刷新。

应该注意的是，只有当我使用CSS转换来淡出菜单时才会出现这种情况。

这是一个plnkr来说明。

Answer 1

这是一个有效的Plnkr。在设置值之前，我基本上给你的菜单时间来完成动画。相关代码如下：

$scope.selectItem = function(id){
    $scope.isActive = false;
    $timeout(function(){
        $scope.query.id = id;
    }, 250);
}

...和使用新创建的selectItem方法的HTML：

<div class="xtab-typeahead" ng-controller="xTabTypeAheadCtrl">

  <input type="text" class="xtab-typeahead-search" placeholder="{{type}}" ng-model="query.id" ng-focus="showMenu()" ng-init="query.id = undefined" />
  <button ng-click="toggleMenu()">Show/Hide</button>

  <ul class="xtab-typeahead-menu" ng-class="{true:'active',false:''}[isActive]">
    <li ng-repeat="item in menuItems | filter:query" 
        ng-click="selectItem(item.id)">
      {{item.id}}
    </li>
  </ul>
</div>

ng-repeat循环参考屏幕刷新

1 个答案: