使用ng-options填充的选择框多次调用ng-change函数

时间:2017-03-16 15:12:30

标签: javascript angularjs

我创建了带有JSON数据中定义的层次结构的链式(父子)选择框。每个选择框对象都指定了它的父选择框对象,以及一个选择框选项数组,其中每个选项都包含选项值+父值。选择框对象还包含选定选项对象,该对象与可用选择框选项对象之一是同一对象。以下是数据的简化表示:

enter image description here

我正在使用“select”标记中的ng-options动态创建选择框,然后我使用自定义过滤器,我通过将选项值的父选项值与“当前”匹配来过滤检索到的选项“父对象的选定值”。基本上使用自定义过滤器从子选项值到选定的父值进行多对一映射。

问题是,有了这个结构,我想把ng-change指令放在select-box上,它会调用一个控制器函数来做一些事情。但是这个函数被调用的次数与一个层次结构中的选择框的数量一样多(在这种情况下为3,如图所示)。这在应用程序中造成严重的不良行为。

Here is the Plunker,我已经转载了这个问题。我在select-box change事件上调用一个函数来设置一个带有select-box的相关单选按钮(例如,如果选择了Country选项框中的某个值,则是层次结构中下一个select-box的单选按钮,即国家,应该被选中)。但是由于多次调用setDrillDown函数,与层次结构中最后一个选择框关联的最后一个单选按钮将被选中。

由于这个问题严重困扰,任何帮助将不胜感激!

2 个答案:

答案 0 :(得分:2)

我使用ngModelOptions作为this 因此,当我更改选择时,它只会运行ngChange中提供的功能。但在初始化阶段,消息仍为空。

我使用$ timeout作为this并且效果很好。

答案 1 :(得分:0)

看起来它按预期工作。 ngChange会在模型值更改时调用,这就是您选择的内容。

当您更改第一个选择框时,ngChangeCountryState会调用City,因为其中的值会发生变化。 如果您在第二次选择State中选择了某些内容,则会为ngChangeState调用City

您将不得不考虑不同的方法或参数化onChange方法