我想制作一个项目列表，双击一个项目可以编辑它。目前，在编辑项目时，在外部单击(即 blur)或通过键盘输入会提交新值。
现在，我想添加一个 + 图标来将项目添加到列表中。 单击 + 图标后，我希望焦点(并双击)在添加的项目上，以便我们可以直接对其进行编辑。
有人知道如何实现吗？
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<style>
input {
font-size: 20px;
border:none;
background-color:transparent;
}
</style>
</head>
<body ng-app="app" ng-controller="Ctrl">
<table>
<tr ng-repeat="item in items">
<td>
<input type="text" value="{{item.name}}" ng-blur='eEditable = -1' ng-readonly='$index !== eEditable' ng-dblclick="eEditable = $index" ng-keypress="keypress($event)"/>
</td>
</tr>
</table>
<div ng-click="add()">+</div>
<script>
var app = angular.module('app', []);
app.controller('Ctrl', ['$scope', function ($scope) {
$scope.items = [{ name: "item #1" }, { name: "item #2" }, { name: "item #3" }];
$scope.eEditable = -1;
$scope.keypress = function ($event) {
if ($event.keyCode === 13)
$event.target.blur()
}
$scope.add = function () {
$scope.items.push({name: "new"});
}
}])
</script>
</body>
</html>
最佳答案
当我在 Angular 上遇到这样的问题时，有时求助于 jQuery 会更容易。
$scope.add = function () {
$scope.items.push({name: "new"});
$scope.eEditable = $scope.items.length-1;
window.setTimeout(function() {
$("table tr:last td input").focus();
}, 0);
https://jsbin.com/yegokobuna/edit?html,output
我将 jQuery 代码推送到 window.setTimeout(..., 0) 中，以便在 Angular 框架完成渲染 HTML 元素后调用代码。
这不是一个很好的解决方案。它更难维护，因为 Controller 代码现在需要对呈现的 HTML 有深入的了解。比方说，如果我要修改 View 以在一系列 div 而不是表格行中显示项目，那么我也必须去更改 Controller 代码。
关于javascript - 将焦点放在添加的项目上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42939739/