在这种情况下帮助我，在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="[email protected]" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
<script data-require="[email protected]" 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>注入$ timeout
$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="[email protected]" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
<script data-require="[email protected]" 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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句