Javascript 交叉引用两个数据集

给定两组对象，称它们为苹果和桔子。 苹果包含一个ID和一个名称。 oranges包含一个appleID和一个整数

苹果被映射到一个html表，每行都有一个名称

名称旁边是一个复选框，当该苹果ID存在于oranges集合中时将选中该复选框。 如果选中该复选框，也会显示绑定到oranges整数的文本框/下拉列表

---

有一件事我确实需要一些帮助，那就是如何为模板中的每一行获取橙色对象，以及如何在选中/取消选中复选框时最好地添加和删除橙色。

我假设您正在从不同的源导入/加载苹果和橙色，但这不是保持它们分开的理由，对吗？您可以通过向Apple对象添加一个oranges整数（如果存在）来扩展Apple对象，而不是使用一个reduntant属性创建两个对象

因此，不是：

var apples = [{id, name}];
var oranges = [{appleID, int}];

只需使用（您可能需要先处理原始数据）：

---

您可以将桔子集映射到如下结构：

oranges = {
    'abc': 5,
    'abd': 20
}

其中“abc”和“abd”是appleIds，5和20是相应的整数

通过这种方式，如果存在相应的橙色条目，您可以通过ng repeat over Apple轻松评估和访问，如果存在，则对应的数字是多少。 如果您想删除oranges条目，只需将其设置为“未定义”，或者最好使用“删除”命令将其删除

做点像

<div ng-repeat="apple in apples">
    {{ apple.name }} :
    <div ng-if="oranges[apple.id] !== undefined">
        <input type="checkbox" ng-change="onCheckboxChange(oranges[apple.id].number)" ng-model="oranges[apple.id].number" />
    </div>
</div>

{{apple.name}}：

苹果和橙子是一个更大整体的一部分，在多个上下文中共享，列表可能会随着时间的推移变得非常大，我希望避免为每个上下文多次加载它们。此外，我希望避免在进行更改时必须同步各种列表，尽管如此，我实际上是建议你只加载一次，但在使用前先处理它。虽然一开始可能看起来很重，但在每个摘要中对它们进行角度合并可能会更重。啊，同步的公平点，我的方法会使它复杂化。如果没有智能解决方案出现，处理该视图的列表是一个可接受的解决方案，我会仔细考虑一下：）是的，我认为这是一个很好的解决方案，但我仍然需要找出如何最好地处理复选框。。多年来，我在点击事件方面有过不好的经验，但我是否可以将值更改以某种方式绑定到事件处理程序？当然，您可以使用ng change指令来实现这一点。此外，您可以通过ng模型将复选框的值绑定到oranges值，正如我所想的那样。我将相应地更改我的答案，以向您展示我的意思。还有另一个提示：如果在ng repeat中定义太多（单击-）侦听器而出现问题，您可以选择在父元素上定义一个侦听器，并计算$event属性单击了哪个子元素。如果您有一个包含数百或数千个元素的列表，那么这实际上是正确的方法，尽管正确实现它有点棘手。不幸的是，AngularJS没有提出更好的解决方案，而React（例如，在处理这个问题时）是开箱即用的（它会自动“重构”您的侦听器），我需要添加这个来让它工作；controller.related={appleid:true}；并将复选框的ng模型设置为ctrl.related[apple.id]

<div ng-repeat="apple in apples">
    {{ apple.name }} :
    <div ng-if="oranges[apple.id] !== undefined">
        <input type="checkbox" ng-change="onCheckboxChange(oranges[apple.id].number)" ng-model="oranges[apple.id].number" />
    </div>
</div>