ng-blur 未在内联编辑中设置 true/false 值
ng-blur not setting true/false value in inline edit
如果通过触发 ng-blur
在输入文本框外单击,我试图在内联编辑中将视图设置为只读视图(修改前的值)。但没有按预期工作。
尝试了我的代码here
<ul ng-init="showInput=false">
<li ng-repeat="todo in todos">
<span ng-show="!showInput" ng-click="showInput=!showInput">{{todo.title}}</span>
<span><input ng-show="showInput" ng-model="todo.title" ng-blur="showInput=true"></span>
</li>
</ul>
我已经尝试了一个 plunker,根据我对你的问题的假设检查它,如果错误请详细说明你的问题
添加了模糊函数
$scope.blurFunc = function(){
$scope.showInput = true;
}
问题
您的代码无法正常工作,因为当您单击 span 时,span 会隐藏,输入会显示,但不会获得焦点。因此,当您单击输入的 "outside" 时,ngBlur 永远不会触发(输入永远不会获得焦点)。检查这个点击跨度并再次点击输入。输入已获得焦点,当您在外部单击时,将触发 ngBlur。
解决方案 1(最佳)
对您的跨度使用指令。单击 span 时,此指令确实专注于输入。无需对您的代码进行更多修改,但您需要一些有关指令的知识。
解决方案 2(很差,但不需要指令)
显示带有两个布尔变量的输入。如果鼠标悬停 span/input,则为真。另一个在您单击时为真,在触发 ngBlur 时为假。当然你需要这样的思考 <input ng-show="mouseOver || showInput">
.
如果通过触发 ng-blur
在输入文本框外单击,我试图在内联编辑中将视图设置为只读视图(修改前的值)。但没有按预期工作。
尝试了我的代码here
<ul ng-init="showInput=false">
<li ng-repeat="todo in todos">
<span ng-show="!showInput" ng-click="showInput=!showInput">{{todo.title}}</span>
<span><input ng-show="showInput" ng-model="todo.title" ng-blur="showInput=true"></span>
</li>
</ul>
我已经尝试了一个 plunker,根据我对你的问题的假设检查它,如果错误请详细说明你的问题
添加了模糊函数
$scope.blurFunc = function(){
$scope.showInput = true;
}
问题
您的代码无法正常工作,因为当您单击 span 时,span 会隐藏,输入会显示,但不会获得焦点。因此,当您单击输入的 "outside" 时,ngBlur 永远不会触发(输入永远不会获得焦点)。检查这个点击跨度并再次点击输入。输入已获得焦点,当您在外部单击时,将触发 ngBlur。
解决方案 1(最佳)
对您的跨度使用指令。单击 span 时,此指令确实专注于输入。无需对您的代码进行更多修改,但您需要一些有关指令的知识。
解决方案 2(很差,但不需要指令)
显示带有两个布尔变量的输入。如果鼠标悬停 span/input,则为真。另一个在您单击时为真,在触发 ngBlur 时为假。当然你需要这样的思考 <input ng-show="mouseOver || showInput">
.