Нг-повтор и фокус ввода

Question

У меня есть список кнопок и входов, сгенерированных с помощью ng-repeat, и мне нужна следующая функциональность: когда я нажимаю кнопку, она фокусируется на следующем вводе.

Если я использую:

    <div>
        <button class="btn btn-sm chat-option chat-option-add but-0" style="padding: 0px;border-radius: 50%;"></button>
        <input type="text" class="input-0" style="color:black;">
    </div>

    <div>
        <button class="btn btn-sm chat-option chat-option-add but-1" style="padding: 0px;border-radius: 50%;"></button>
        <input type="text" class="input-1" style="color:black;">
    </div>`enter code here`
 <script>
    $('.but-0').click(function () {
        $('.input-0').focus();
    });
    </script>

    <script>
    $('.but-1').click(function () {
        $('.input-1').focus();
    });
    </script>

это работает отлично. но если я хочу использовать ng-repeat с этими скриптами:

   <div ng-repeat="f in testFocus">
            <button class="btn btn-sm chat-option chat-option-add but-{{$index}}" style="padding: 0px;border-radius: 50%;"></button>
            <input type="text" class="input-{{$index}}" style="color:black;">

        </div>

это не работает для меня - нажатие кнопки не фокусирует ввод вообще.

Спасибо

Answer 1

Вы должны привязать событие к уже существующему элементу.

<button class="btn btn-sm chat-option chat-option-add but-{{$index}}" style="padding: 0px;border-radius: 50%;">button</button>
<input type="text" class="input-{{$index}}" style="color:black;" />

$(document).on('click', '.but-0', function () {
    $('.input-0').focus();
});

$(document).on('click', '.but-1', function () {
    $('.input-1').focus();
});

В угловых вы можете сделать это более элегантно, воспользовавшись помощью ng-click на кнопке.

<button class="btn btn-sm chat-option chat-option-add" ng-click="buttonClicked($index)" style="padding: 0px;border-radius: 50%;">button</button>
<input type="text" class="input-{{$index}}" style="color:black;" />

$scope.buttonClicked = function($index) {
    $('.input-'+ $index).focus();
}

Смотрите это ДЕМО