AngularJS:观察多个数组中的特定属性

AngularJS : Watch specific properties in multiple arrays

本文关键字：属性 数组 观察 AngularJS      更新时间：2023-09-26

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

我有一个销售订单，它有一个名称和一系列项目。每个项目都有一组子项目和一组时间表。我想看一些使"总价"变脏的房产。例如，Quantity、Discount和schedule数据（不包括schedule名称）需要计算新价格（通过ajax）。我想在根作用域"_priceDirty"中设置一个标志，以显示一个刷新价格的按钮。当我添加项目，或将子项目或时间表添加到项目时，同样适用。

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

示例

（对标有*的字段的更改应启用刷新按钮）

  • 订单名称
  • 总价<-（这是通过ajax更新的）
  • 总持续时间<-（这是通过ajax更新的）
  • 项目
    • 项目1
      • 名称
      • 说明
      • 数量*
      • 子项目
        • 分项1
          • 名称
          • 说明
          • 数量（int）*
          • 折扣（布尔）*
        • 分项2
          • 名称
          • 说明
          • 数量（int）*
          • 折扣（布尔）*
      • 附表
        • 附表1
          • 日程安排名称
          • 开始日期*
          • 结束日期*
          • 开始时间*
          • 结束时间*
        • 附表2
          • 日程安排名称
          • 开始日期*
          • 结束日期*
          • 开始时间*
          • 结束时间*
        • 附表3
          • 日程安排名称
          • 开始日期*
          • 结束日期*
          • 开始时间*
          • 结束时间*
    • 项目2
      • 名称
      • 说明
      • 数量*
      • 子项目
        • 分项1
          • 名称
          • 说明
          • 数量（int）*
          • 折扣（布尔）*
      • 附表
        • 附表1
          • 日程安排名称
          • 开始日期*
          • 结束日期*
          • 开始时间*
          • 结束时间*

我认为您可以用普通的事件侦听器取代角度观察者。我不知道这些值是如何被修改的，但我想有一些输入元素。因此，假设用户修改了"数量"输入字段。这会生成一个输入事件，表示输入值已更改。您可以在包含所有这些输入的元素上只放置一个事件侦听器，并检查更改是否来自您感兴趣的输入，如果是，则进行适当的计算，否则忽略它。这样，您就可以将一堆侦听器/观察者交换为一个观察者，但您必须筛选事件。它还应该解决来自太多观察者的任何性能问题。

您可以将函数传递给$watch

scope.$watch(
    function($scope) {
        return $scope.DataArr.map(function(dataInstance) {
                    return dataInstance.SomeProperty;
                });
    },
    function(newVal, oldVal) {
        if (newVal) {
            //SomeProperty was changed
        }
    });

将以上内容结合起来，并可能对数据结构进行重构，使其稍微扁平化，应该会让您达到目的。

相关文章：