我想制作一个项目列表,双击一个项目使其可编辑。目前,在编辑项目时,单击外部(即blur
)会提交新值。但是,我也希望enter
在键盘上能够提交更改。
现在,ng-keyup、ng-keydown、ng-keypress是 AngularJS 的一部分。我正在考虑使用它们。这是我当前的代码。它可以捕捉到我们正在编辑的事件enter
,item
但我不知道如何做剩下的。
有人可以帮忙吗?
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.up = function ($event, item) {
if ($event.keyCode === 13) {
console.log(item.name);
// what to do?
}
}
}])
input {
font-size: 20px;
border:none;
background-color:transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<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-keyup="up($event, item)"/>
</td>
</tr>
</table>
</body>
PS:JSBin