повторить и сфокусировать ввод

Question

повторить и сфокусировать ввод

0

У меня есть список кнопок и входов, генерируемых 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>

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

благодаря

user6315833 30 май 2016, в 10:26

Источник

Теги:

angularjs

focus

ng-repeat

1 ответ

Ещё вопросы

Saad · Accepted Answer · 2016-05-30T06-25-00.000Z

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

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

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

Спасибо за ответ, он отлично работает, но у меня возникают проблемы, если я использую ng-show. я не могу понять, почему это вредит связыванию. <button class = "btn btn-sm chat-option chat-option-add" ng-click = "Show = true; buttonClicked ($ index)"> </ button> <input type = "text" class = "input- {{$ index}} "style =" color: black; " ng-model = "value" ng-show = "Show" />
Используйте $timeout для выполнения этого кода $('.input-'+ $index).focus(); после удаления ng-hide . Смотрите этот поршень . Кстати, вы также можете использовать директиву для фокусировки элемента, когда ng-show имеет значение true. Для этого, смотрите этот пост .