以角度交叉引用两个数据集

Cross-reference two datasets in angular

本文关键字：两个 数据集 引用      更新时间：2023-09-26

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

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

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

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

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

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

其中"abc"answers"abd"是appleId，5和20是相应的整数。

通过这种方式，如果存在相应的橙色条目，那么你可以很容易地从你的ng repeat-over-apples中评估和访问，如果存在，那么对应的数字是多少。如果您想删除一个桔子条目，只需将其设置为未定义，或者更好地使用"delete"命令将其删除。

只需做一些类似的事情

<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>

我假设您从不同的来源导入/加载苹果和橙子，但这不是将它们分开的理由，对吧？您可以简单地通过向apples对象添加一个桔子整数（如果存在）来扩展它，而不是让两个对象具有一个reduntant属性。

所以不是：

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

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

var apples = [{id, name, int}];
相关文章：