ng-repeat 循环参考屏幕刷新

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-repeat 过滤器的来源）。我希望隐藏菜单的 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>