在 ng-repeat 中单击按钮时将焦点设置在文本框上答案

【问题标题】：Set focus on textbox on button click in ng-repeat在 ng-repeat 中单击按钮时将焦点设置在文本框上
【发布时间】：2017-01-02 17:01:21
【问题描述】：

在这种情况下帮助我，在 ng-repeat 中有按钮，单击按钮时启用文本框，启用文本框我希望在其中获得焦点。也将焦点设置到文本的末尾。

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>

【问题讨论】：

Set element focus in angular way的可能重复
我的 ng-repeat 问题
我更新了我的答案:)

标签： html angularjs

【解决方案1】：

@Cattla 的回答很好，但您应该使用指令将焦点设置到您的元素：事实上，在控制器中进行 DOM 操作是不好的。

这样就足够了：

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

你可以这样使用它（注意自动对焦属性）：

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

注意：这样，您不必将 jquery 添加到您的依赖项中（您使用的是内置的 jqlite 和 javascript）。

【讨论】：

最干净的解决方案，可重复使用。

【解决方案2】：

注入$超时

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

如果使用 jQuery 并尝试将焦点设置到文本的末尾。添加以下代码：

$('.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>

【讨论】：