当按下文本区域中的向下键时选择li

Question

我有像这样的HTML

<div class="row">
    <textarea id="txtArea" ng-model="input"
              ng-change="handleOnChange(input);getSearchField(input);"
              ng-click="search(input)" ng-focus="search(input);"
              ng-keyup="search(input)" rows="10" cols="50" tabindex="0">
    </textarea>
    <div>
        <ul ng-if="shouldSelect" id="dataList">
            <li ng-repeat="f in func | filter:searchField"
                ng-click="typeSelected(f)"> {{f}} </li>
        </ul>
        <ul ng-if="shouldShowSubType">
            <li ng-repeat="f in selectedSubType"
                ng-click="subTypeSelected(f)"> {{f}} </li>
        </ul>
    </div>
</div>

现在我要做的是，当我按下键时，我应该能够从列表中选择li，当我按下回车时，li文本应该添加到textarea模型中。我怎样才能做到这一点？

UPDATE

我尝试使用下面的代码，仍然无法正常工作。

 $('#txtArea').keypress(function(event){
            if(event.keyCode == 40)
            {
                document.getElementById("dataList").focus();
            }
        });

因为ul没有集中注意力。如果我将ul更改为select，我的点击功能无效。

Answer 1

您可以在文本区域中使用(keydown.ArrowDown)="onDown($event)，也可以在onDown函数中编写更多逻辑。

 <textarea id="txtArea" ng-model="input"
          ng-change="handleOnChange(input);getSearchField(input);"
          ng-click="search(input)" ng-focus="search(input);"
          (keydown.ArrowDown)="onDown($event)" rows="10" cols="50" tabindex="0">

在你的打字稿文件中，你可以这样做。

 onDown(event){
    console.log(event.srcElement.value);
  }