2016-05-30 15 views
0

Ich habe eine Liste von Schaltflächen und Eingaben von ng-repeat generiert, und ich möchte die folgende Funktionalität: Wenn ich auf eine Schaltfläche klicken, konzentriert es sich auf die folgende Eingabe.ng-repeat und Fokus-Eingänge

Wenn ich benutze:

<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> 

es funktioniert gut. aber wenn ich will ng-repeat mit diesen Skripten verwenden:

<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> 

es nicht für mich funktioniert - Klick auf die Schaltfläche konzentriert sich nicht die Eingabe überhaupt.

dank

Antwort

1

Sie haben Ereignis zu einem bereits bestehenden Elemente zu binden.

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

In Winkel können Sie es eleganter tun mit Hilfe von ng-click auf die Schaltfläche Aufnahme.

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

dies Siehe DEMO

+0

danken Ihnen die Antwort Feind, es funktioniert so gut, aber im Probleme haben, wenn i ng-Show. Ich kann nicht sehen, warum es die Bindung schädigt. user6315833

+0

Verwenden Sie '$ timeout', um diesen Code' $ ('. input -' + $ index) .focus(); 'nach' ng-hide' auszuführen ist entfernt. Siehe hierzu [plocker] (http://plnkr.co/edit/JLJLlzcOoSgeZ5TmPFHK?p=preview). Übrigens können Sie auch eine Direktive verwenden, um das Element zu fokussieren, wenn 'ng-show' wahr ist. Für diesen einen, siehe [post] (http://stackoverflow.com/questions/24415168/setting-focus-on-an-input-field-after-ng-show). – Saad