javascript - AngularJS : Watch specific properties in multiple arrays

Question

我的 angularjs 应用程序中有一个表单，其中有很多嵌套对象。我需要观察其中一些嵌套字段的变化。

我有一个销售订单，其中包含名称和项目数组。每个项目都有一组子项目和一组时间表。我想看看一些使“总价”变得肮脏的特性。例如，数量、折扣和计划数据(不包括计划名称)需要计算新价格(通过 ajax)。我想在根范围“_priceDirty”中设置一个标志以显示刷新价格的按钮。当我添加项目或向项目添加子项目或计划时，这同样适用。

我如何在 angularjs 中正确观察这些属性？对 SalesOrder 的深入监视是巨大的，我需要自己检查哪些字段发生了更改，因为如果仅更改了名称或说明，我不想启用刷新按钮。项目上的 $watchCollection 可能也不起作用，因为我只想查看其中的一些属性。每次将新项目/子项目/计划添加到列表中时，我可以向我想要的每个字段添加 $watch，但似乎有很多 $watch-es (最简单的顺序有 9 个属性，大约 24 个属性是正常的，见下文。)

示例

(对标有 * 的字段进行更改应启用刷新按钮)

• 订单名称
• 总价<-(通过ajax更新)
• 总持续时间<-(通过ajax更新)
• 元素
  • 项目 1
    • 姓名
    • 描述
    • 数量 *
    • 子项目
      • 子项目 1
        • 姓名
        • 描述
        • 数量(整数)*
        • 折扣( bool 值)*
      • 子项目 2
        • 姓名
        • 描述
        • 数量(整数)*
        • 折扣( bool 值)*
    • 时间表
      • 附表 1
        • 日程名称
        • 开始日期 *
        • 结束日期 *
        • 开始时间 *
        • 结束时间*
      • 附表 2
        • 日程名称
        • 开始日期 *
        • 结束日期 *
        • 开始时间 *
        • 结束时间*
      • 附表 3
        • 日程名称
        • 开始日期 *
        • 结束日期 *
        • 开始时间 *
        • 结束时间*
  • 第 2 项
    • 姓名
    • 描述
    • 数量 *
    • 子项目
      • 子项目 1
        • 姓名
        • 描述
        • 数量(整数)*
        • 折扣( bool 值)*
    • 时间表
      • 附表 1
        • 日程名称
        • 开始日期 *
        • 结束日期 *
        • 开始时间 *
        • 结束时间*

Answer 1

我认为你可以用普通的事件监听器替换 Angular 观察者。我不知道这些值到底是如何修改的，但我想有某种输入元素。因此，我们假设用户修改了“数量”输入字段。这会生成一个输入事件，表示输入值已更改。您可以在包含所有这些输入的元素上仅放置一个事件监听器，并检查更改是否来自您感兴趣的输入，如果是，则进行适当的计算，否则忽略它。通过这种方式，您可以将一堆监听器/观察器交换为一个观察器，但您必须过滤事件。它还应该解决因观察者数量过多而产生的任何性能问题。