选择控件停止显示其IE下拉列表,AngularJS和一些奇怪的特定条件

时间:2015-05-04 05:01:01

标签: angularjs internet-explorer-11

我有一个奇怪的问题,<select>控件在更改值(两次)后使用AngularJS停止在IE11中显示其下拉列表。

Chrome(42)和FF(37)没有出现此问题。

Plunker:http://plnkr.co/edit/Ea0nMnPxXdqm8O59NyZS?p=preview

小提琴:http://jsfiddle.net/xydvqo0q/

步骤:

  1. 单击选择以打开其下拉列表。
  2. 选择列出的两个选项之一。 (它关闭,页面中的其他几个字段会更新它们的值。)
  3. 点击再次打开。
  4. 选择其他选项。 (它关闭,字段再次更新。)
  5. 点击再次打开下拉列表。 将不再打开
  6. 一旦进入此状态,鼠标单击或Alt-downarrow都不会显示下拉列表。

    (此外,同一页面上的其他选项也会停止显示其下拉列表,并且页面似乎存在一般控制/窗口问题 - 例如,您无法选择HTML文本,而其他控件也会赢得& #39; t显示焦点或插入符号。似乎IE失去了关于哪个是活动&#34;窗口&#34;以及它似乎被卡在选择内部的情节。按Tab键几次将其从卡住中取出状态。)

    现在,IE控件/窗口错误并不常见。但这很奇怪,因为要重现的具体要求。我已经将这个例子剥离出来似乎是复制所需的最低要求(但你可能会认为页面中有很多东西应该是无关紧要的 - 不要害怕)。

    要显示的问题,页面需要以下内容:

    • 嵌套表(列出&#34; hello&#34; s)必须在那里(并且必须嵌套 - 如果它不在另一个表中,那么问题就会消失)。 (我让它列出了hellos以消除它列出范围数据以消除原因。)
    • 包含{{selecteditem.number}}的表行必须在那里,并且必须在嵌套表之后(在删除问题之前移动它)。我将它移到一个单独的表中,问题仍然存在。
    • 这两个项目的selecteditem.number数据必须不同。如果&#34;数字&#34;这两个项的值相同,不会显示问题。
    • &#34;子项目的数量&#34;对于这两个项中的每一个必须是SAME(意味着嵌套表最终具有相同的行数)。如果您将其他子项添加到其中一个项目,则问题已得到解决。如果您向两者添加子项(因此它们都有两个),则问题将返回。
    • (你觉得我疯了吗?我以为我是。但是等到那儿还有......)
    • 嵌套表必须具有CSS属性border-collapse: collapse。如果没有此属性,或者此属性具有不同的值,则不会发生此问题。注意:该表可以从父表继承此属性,也可以从表CSS规则或类中继承此属性(如演示所示),但问题仍然存在。将其删除&#34;直播&#34;使用IE的F12开发控制台,问题得到解决。
    • 嵌套表的TD - 即&#34; hellos&#34; - 必须有CSS边框。他们可以继承这个,或者从类中获取它(根据演示)。

    基本上,我必须告诉客户端他们可以有一个折叠边界的表来显示字段表中的子项(通常比演示中的更多)或者有一个下拉列表,但不是两者都有。 (或者不要使用IE,这不是一个选项,或者改变你的表单顺序,这对用户来说没有任何意义。)

    我尝试不使用ng-options(而是ng-repeat - option},但我得到了相同的结果(我只限于2个链接,所以这里&#39; s plnkr ID:95XcM9j2eY70jUK10UrH)。

    我可以完全转储选择。

0 个答案:

没有答案