javascript angularjs中ng-repeat中的自动对焦
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21350572/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Auto focus in ng-repeat in angularjs
提问by Fizer Khan
I uses ng-repeat to get multiple phone numbers
我使用 ng-repeat 获取多个电话号码
<div ng-repeat="phone in phones">
<input ng-model="phone" type="text" autofocus="autofocus">
</div>
<a ng-click="addPhone()">Add Phone</a>
In controllers
在控制器中
$scope.addPhone = function() {
$scope.phones.add('');
}
Whenever i add new phone, it automatically autofocus the input. It works great. But when i reload(open from link) the view, it scrolls to last entry. How do i avoid autofocus at first time the view loads. Only i want to autofocus when i add new phone.
每当我添加新手机时，它都会自动对输入进行自动对焦。它工作得很好。但是当我重新加载（从链接打开）视图时，它会滚动到最后一个条目。我如何在第一次加载视图时避免自动对焦。只有当我添加新手机时我想自动对焦。
回答by Khanh TO
Try:
尝试：
<div ng-repeat="phone in phones">
<input ng-model="phone" type="text" ng-if="$index == focusIndex" autofocus>
<input ng-model="phone" type="text" ng-if="$index != focusIndex">
</div>
<a ng-click="addPhone()">Add Phone</a>
JS:
JS：
$scope.addPhone = function() {
$scope.phones.push('Phone' + Math.random());
$scope.focusIndex = $scope.phones.length-1;
}
Solution using custom attribute:
使用自定义属性的解决方案：
<div ng-repeat="phone in phones">
<input ng-model="phone" type="text" custom-autofocus="$index == focusIndex" >
</div>
<a ng-click="addPhone()">Add Phone</a>
JS:
JS：
.directive('customAutofocus', function() {
return{
restrict: 'A',
link: function(scope, element, attrs){
scope.$watch(function(){
return scope.$eval(attrs.customAutofocus);
},function (newValue){
if (newValue === true){
element[0].focus();//use focus function instead of autofocus attribute to avoid cross browser problem. And autofocus should only be used to mark an element to be focused when page loads.
}
});
}
};
})
回答by Nikita
You can use this directive: https://github.com/aikus/ng-focus-if/blob/master/ng-focus-if.jsFor example:
你可以使用这个指令：https: //github.com/aikus/ng-focus-if/blob/master/ng-focus-if.js例如：
<div ng-repeat="phone in phones">
<input ng-model="phone" type="text" ng-focus-if="1==1">
</div>
<a ng-click="addPhone()">Add Phone</a>
回答by ncabral
What happens is you have a list of inputs that is demanding the focus when the page loads at the same time. Since the last input renders last, it always gets the autofocus.
发生的情况是，当页面同时加载时，您有一个需要焦点的输入列表。由于最后一个输入最后呈现，它总是获得自动对焦。
The solution would be to apply the autofocusattribute when needed.
解决方案是autofocus在需要时应用该属性。
<div ng-repeat="phone in phones">
<input ng-model="phone" type="text" autofocus="{{phone.autofocus || 'false'}}">
</div>
<a ng-click="addPhone()">Add Phone</a>
Controller:
控制器：
$scope.addPhone = function() {
$scope.phones[$scope.phones.length-1].autofocus = 'false'; // unfocus the old
$scope.phones.add('');
$scope.phones[$scope.phones.length-1].autofocus = 'true'; // focus the new
}
回答by allenhwkim
Having autofocus multiple times in your page is not forbidden, but does not look right based on the documentationm, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
不禁止在您的页面中多次自动对焦，但根据文档，https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input看起来并不正确
It saysOnly one form element in a document can have the autofocus attribute
它说Only one form element in a document can have the autofocus attribute
autofocus HTML5 This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the autofocus attribute, which is a Boolean. It cannot be applied if the type attribute is set to hidden (that is, you cannot automatically set focus to a hidden control).
autofocus HTML5 此布尔属性允许您指定表单控件在页面加载时应具有输入焦点，除非用户覆盖它，例如通过键入不同的控件。文档中只有一个表单元素可以具有 autofocus 属性，它是一个布尔值。如果 type 属性设置为 hidden（即不能自动将焦点设置到隐藏控件），则无法应用它。
I would not to use autofocuswithin ng-repeatand set focus manually after it is added.
我不会autofocus在ng-repeat添加后手动使用和设置焦点。
