Angularjs:带有过滤器的ng-options,select元素的模型保留过滤选项的值

时间:2013-09-23 16:27:22

标签: angularjs angularjs-filter ng-options

我在使用ng-options和过滤器时遇到了麻烦。

问题是,当过滤器删除某个选项时,select元素的模型会保留已删除选项的值。

这是plunker。我有两个过滤器处理ng-options集。一个从选项列表中删除重复项,另一个删除空值。您可以按照以下步骤查看我所说的问题。

  1. 在“首选电子邮件”下拉列表中,选择最后一个电子邮件选项“jimbob@yahoob.com”。
  2. 删除“其他电子邮件”输入框中的文字。
  3. 您现在可以看到,因为“其他电子邮件”为空,它不再是可用选项,并且下拉列表默认为“请选择首选电子邮件”。但是,select元素的模型仍然分配了该对象。

    同样的问题不同的背景。

    1. 在“首选电子邮件”下拉列表中,选择“jimbob@yahooz.com”选项。
    2. 现在删除“jimbob@yahooz.com”中的“z”
    3. 执行此操作后,两个输入框(“电子邮件”和“家庭电子邮件”)中的值将变为重复,而第二个(“家庭电子邮件”)中的值将从可用选项中过滤掉。但是,刚过滤的对象仍然会分配给模型。

      编辑:我的解决方案(任何人都可以做得更好吗?)

      这里(plunker)是我能想到的最好的。我是棱角分明的新手并不禁认为有更好的方法可以做到这一点,我认为这个解决方案“糟糕”但它确实有效。

      基本上我将过滤器的引用(this.contact)以及我正在使用的默认项目的名称('default_email'或'default_phone')传递给过滤器。如果过滤器正在从选项集中删除一个项目,它会检查它是否为默认值,如果是,则将默认值设置为undefined。

      我还添加了一些代码,以获得更多关于我正在努力的背景。

1 个答案:

答案 0 :(得分:0)

我知道这已经过时了,但我花费了很长时间时间试图找出解决这个问题的最佳方法。

原来它已在Angular 1.4中修复了!尝试用1.4替换原始plunker中的Angular版本,问题就消失了。我通过尝试各种版本找到了这个,直到我缩小它。