ng-repeatとフォーカス入力

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・リピートを使用する場合：それは私のために動作しません

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

このDEMO