Question

在这种情况下帮助我在ng-repeat中有按钮，在按钮上单击文本框启用，启用文本框我想要一个焦点。也将重点放在文本的最后。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

来自@Cattla的答案很好，但你应该使用一个指令将焦点设置到你的元素上：实际上，在你的控制器中做DOM操作是不好的。

这样的东西就足够了：

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

这就是你如何使用它（注意自动对焦属性）：

{{1}}

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

Answer 2

注入$ timeout

context

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

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

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

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

2 个答案: