我有一个简单的< select>< / select>在< div>内使用ng-show属性,类似于:
<div ng-show="edit"> <select ng-options="key as value in VALUES"></select> </div>
现在出于某种原因,当我点击选择打开它时,它会闪烁,就像选择是打开/关闭真的很快.有时会眨眼两次,有时甚至更多.我之前使用过有角度的选择框,从来没有这个.
我发现了导致它的原因.它发生的完整形式如下:
<form class="mb-lg" name="formValidate" ng-init="addCreate = '.action_add'" novalidate="" role="form"> <label class="radio-inline c-radio"> <input id="action_add" name="add_create" ng-model="addCreate" required="required" type="radio" value=".action_add"> <span class="fa fa-circle"></span> Add to existing </label> <div class="form-group has-Feedback"> <select class="form-control" name="selected" ng-disabled="addCreate != '.action_add'" ng-model="selected" ng-options="p as p.name for p in portfolios | filter : {'update?': true}" ng-required="addCreate == '.action_add'" required="required"></select> </div> <label class="radio-inline c-radio ng-binding"> <input id="action_create" name="add_create" ng-model="addCreate" required="required" type="radio" value=".action_create"> <span class="fa fa-circle"></span> Or Create new one </label> <div class="form-group has-Feedback"> <input class="form-control" name="name" ng-disabled="addCreate != '.action_create'" ng-model="new" ng-required="addCreate == '.action_create'" disabled="disabled"> </div> </form>
当显示表单时,第一个< input> (所选单选按钮)是聚焦的,当我点击< select>时打开它,将发生$apply(这是Angular的基本行为,没有自定义)导致< select>重新编译?如果我点击任意位置,则< select>不会闪烁,或者我像$(‘:focus’)手动模糊一样.bluck();然后它也不会眨眼.
注意:表单在对话框(ngDialog)中,不确定是否有所不同
它似乎是这个错误:
https://bugs.chromium.org/p/chromium/issues/detail?id=613885
正如评论中所建议的,在select上设置转换为none已经解决了这个问题,在我的情况下(使用bootstrap)使用以下方法:
select.form-control { transition: none; }
要在没有引导程序的情况下使用,或者在不使用.form-control类的情况下使用,只需删除.form-control选择器并确保其他任何内容都不会覆盖select元素的transition属性:
select { transition: none; }