AngularJS - ngRepeat.在 ng 重复重新渲染后,需要将焦点集中在相同的元素事件上
AngularJS - ngRepeat. Need to keep focus on the same element event after ng-repeat re rendering
>我有一个包含三个输入的列表,用户可以通过按放置在它们左侧的红叉来删除每个输入。当用户删除一个输入时,下一个输入将聚焦并删除所选复选框。直到到目前为止一切顺利。删除元素后,ng-repeat循环迭代更新的模型,我失去了元素焦点。有什么办法可以防止这种情况吗?
非常感谢,
吉列尔莫
PD:包括指令代码以防万一。
directive('checkEmptyInput', function ($timeout,$q) {
return {
restrict: 'A',
require: '?ngModel',
link: function (scope, element, attrs, ngModel) {
if(!ngModel) return; //do nothing if no ng-model
var idx = scope.$index,
array = [],
fieldIsValid = false;
element.on('keyup', function () {
switch (attrs.checkEmptyInput) {
case "method":
array = scope.album.tracks;
fieldIsValid = scope.ngAlbumForm.track.$valid;
break;
}
if(array[idx].name && array[idx].name != "" && fieldIsValid) {
array[idx].active = true;
} else {
array[idx].active = false;
if(scope.elementHasId(array[idx])){
scope.deleteKeyFromCombinationsCodes(array[idx].id);
}
};
if (array[idx].name == "") {
//Previous to delete focus the next element
$timeout(function () {
var nextElem = element.parent().next().find('input')[0];
if(nextElem !== undefined) {
if(!scope.$last) {
//Delete the element
console.log("Deleting from inside the directive...");
nextElem.focus();
scope.$emit("deleteArrayElement", [idx]);
}
}
});
}
});
}
}
})
.HTML:
<div ng-repeat="track in album.tracks">
<input check-empty-input="track" type="text" ng-change="addInputText($index,$last,track.name,album.tracks;" ng-minlength="3" class="album_tracks" ng-model="track.name" ng-unique="track"/><button type="button"/>
<i class="remove-icon"></i>
</button>
</div>
普伦克:http://plnkr.co/edit/BRN9csBcxHp5QU96NKq9?p=info
啊,我看到的是扑通。 ng-repeat
重用元素,并在初始链接期间选取索引。 如果您在keyup
处理程序中设置idx
,它将起作用。 (波兰兹罗提)
element.on('keyup', function () {
idx = scope.$index;
相关文章:
- keyup事件处理程序更改焦点不适用于快速键入
- 单击时将焦点更改为元素
- 在jstree中,如何将指定的节点集中到大型树上
- 后焦点更改为IE 11中的地址栏,而不是转移到表单中的下一个控件
- 在IE9中的输入字段中输入焦点最近按钮
- Javascript游戏输入失去焦点
- Don'不允许将焦点集中在自动完成的选择上
- 在自动重影文本区域中打字时,会将焦点集中在元素的顶部
- 如何将焦点集中在除某些条件外的单个文本框上
- AngularJS - ngRepeat.在 ng 重复重新渲染后,需要将焦点集中在相同的元素事件上
- 如何强制将焦点集中在动态添加的 SPAN 上
- JavaScript焦点()函数没有't将文本区域集中在页面加载上
- 使用javascript将焦点集中在select中
- 如果已选择某个字段,则无法将焦点集中在该字段上
- 如何在加载页面时将焦点集中在特定选项卡上
- 将焦点集中在按下“escape”上;关键
- 放大镜-弹出窗口不允许其内部的弹出窗口集中焦点
- 将焦点集中在jQueryUI菜单项上,该菜单项具有比单击侦听器更宽的侦听器
- 使用jquery将焦点集中在文本框上
- 防止在上一个输入为空时将焦点集中在下一个输入上