AngularJS：添加焦点行为以列出类似于`select-option`的项目

Posted 2023-05-09

【中文标题】AngularJS：添加焦点行为以列出类似于`select-option`的项目

【英文标题】：AngularJS: Add Focus behavior to list items similar to `select-option`

【发布时间】：2017-06-14 01:53:54

【问题描述】：

我有一个html 列表，其中包含一些文本项。当用户键入类似于select-option 的文本的首字母时，我需要使列表项成为焦点，当用户键入其选项的首字母时；匹配选项成为焦点。我需要对列表有相同的行为。我正在使用 angular 的 ng-repeat 指令呈现我的列表：

<ul class="list-group m-3 col">
  <li ng-repeat="song in ctrl.songs | orderBy" class="list-group-item list-group-item-action" tabindex="$index">
    <span>song</span>
  </li>
</ul>

我用谷歌搜索了一个插件/库，但遗憾的是找不到。我可以为此写一个directive，但时间不允许。那么任何人都可以告诉我是否有任何可用的库/插件？这是plunkr。

【参考方案1】：

在与引导程序的jQuery 和tabindex 共度美好时光后，我终于让它工作了。

function bringToFocus(text) 
        var item = element.children().filter(function(child) 
          return angular.element(this).text().trim().toLowerCase().startsWith(text.toLowerCase());
        ).first();
        item.focus();
      

这是有效的plunkr。希望它可能对某人有所帮助。