Jigarb1992 Jigarb1992 - 2 months ago 15
AngularJS Question

Set focus on textbox on button click in ng-repeat

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>




Answer

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>

Comments