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