Set focus on textbox on button click in ng-repeat

Question

Help me in this scenario there are button in ng-repeat, on button click the textbox is enable, with enable of textbox I want a focus in it. also the focus set to the end of the text.

var app = angular.module('app', []);

app.controller('demoController', function($scope, $timeout) {
  $scope.testFocus = [{'id': 0, 'isShow': false}, {'id': 1,'isShow': false}];
  
  $scope.buttonClicked = function(f, $index) {
   
    angular.forEach($scope.testFocus, function(value, key) {
      $scope.testFocus[key].isShow = (value.id == f.id ? true : false );
      
    });
    $timeout(function () {
         $('.input-'+ $index).focus();
    });
    
  }
    
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
    <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="demoController">
    <div ng-repeat="f in testFocus">
      <button class="btn btn-sm chat-option chat-option-add" ng-click="buttonClicked(f, $index)" style="padding: 0px;border-radius: 50%;">button</button>
      <input ng-if="f.isShow" value="hello" type="text" class="input-{{$index}}" style="color:black;" />
    </div>
  </body>

</html>

Possible duplicate of [Set element focus in angular way](http://stackoverflow.com/questions/25596399/set-element-focus-in-angular-way) — Alien, Aug 26 '16 at 06:22

Alien · Accepted Answer · 2016-08-26T06:35:00.967

inject $timeout

$timeout(function () {
     $('.input-'+ $index).focus();
 });

if using jQuery and try focus set to the end of the text. add below code:

$('.input-'+ $index).val($('.input-'+ $index).val())

var app = angular.module('app', []);

app.controller('demoController', function($scope, $timeout) {
  $scope.testFocus = [{'id': 0, 'isShow': false}, {'id': 1,'isShow': false}];
  
  $scope.buttonClicked = function(f, $index) {
   
    angular.forEach($scope.testFocus, function(value, key) {
      $scope.testFocus[key].isShow = (value.id == f.id ? true : false );
      
    });
    $timeout(function () {
         $('.input-'+ $index).focus();
         $('.input-'+ $index).val($('.input-'+ $index).val());
    });
    
  }
    
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
    <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="demoController">
    <div ng-repeat="f in testFocus">
      <button class="btn btn-sm chat-option chat-option-add" ng-click="buttonClicked(f, $index)" style="padding: 0px;border-radius: 50%;">button</button>
      <input ng-if="f.isShow" type="text" class="input-{{$index}}" style="color:black;" value="text" />
    </div>
  </body>

</html>

score 3 · Answer 2 · answered Aug 26 '16 at 06:14

The answer from @Cattla is fine, but you should use a directive to set focus to your element: in fact, doing DOM manipulation in your controller is bad.

Something like this would suffice:

.directive('autoFocus', ['$timeout', function($timeout) {
  return {
    restrict: 'A',
    link : function($scope, $element) {
      $timeout(function() {
        $element[0].focus();
      });
    }
  }
}])

and this is how you can use it (notice the auto-focus attribute):

<input ng-if="f.isShow" auto-focus type="text" class="input-{{$index}}" style="color:black;"/>

Note: this way, you'll not have to add jquery to your dependencies (you are using the built-in jqlite and javascript).

Set focus on textbox on button click in ng-repeat

2 Answers2