我有一个 html 页面,其中包含问题和添加多个选项的能力以及添加或删除选项的能力。
如何将焦点设置到使用添加按钮/链接添加的新添加的选项文本框
这是 Plnkr 的链接
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.question = { question: 'what is your name',
options: [{option:'Red', code: '1'}, {option:'Blue', code: '2'},
{option:'Green', code: '3'},{option:'Black', code: '4'}]};
});
app.directive('myDirective', function(){
return {
link: function(scope, element, attrs, ctrls) {
function Option() {
this.option = '';
this.code = '';
}
scope.addOption = function(index) {
var existingOption = scope.question.options;
if (existingOption && existingOption.length) {
var newOption = new Option(index + 1);
scope.question.options.splice(index + 1, 0, newOption);
}
}
scope.removeOption = function (index) {
if (index > -1) {
scope.question.options.splice(index, 1);
}
}
},
restrict: 'AE',
scope: {
question: "="
},
templateUrl: 'question.html'
};
});
最佳答案
您可以创建一个自动对焦指令,该指令将在元素首次创建时给予焦点:
.directive('autofocus', function($timeout) {
return {
link: function(scope, element, attrs) {
$timeout(function() {
element.focus();
});
}
}
});
然后在question.html中给input加上autofocus属性:
<input type="text" autofocus class="form-control... />
关于javascript - Angular 指令 ng-repeat 输入将焦点设置为使用添加按钮添加的新选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39259167/