angularjs – 角度选择闪烁

我有一个简单的< 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; }

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...