выберите 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.Как мне этого добиться?

ОБНОВЛЕНИЕ

Я пытался использовать приведенный ниже код, но он не работает.

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

Beacuse 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);
  }