使用 AngularJS HTML 映射两个集合(内部连接)

问题描述

我有两个集合 user 和 Type.我希望显示标记为 IsPreffered = TRUE 的电子邮件 ID，我需要将 email.Type 映射到 Type.ID

{ "user" : [
    {
        "Name" : "B. Balamanigandan",
        "Email": [
            {
                "Id": "[email protected]",
                "IsPreffered": true,
                "Type": 1,
            },
            {
                "Id": "[email protected]",
                "IsPreffered": false,
                "Type": 2,
            }
    ]}
]};

{
    "Type": [
        {
            "ID": 1,
            "Name": "Private"
        },
        {
            "ID": 2,
            "Name": "Home"
        },
        {
            "ID": 3,
            "Name": "Business"
        },
]}

HTML 源代码:

<span ng-repeat="email in collection.user[0].Email | filter: {IsPreffered : true} " ng-if="$last"> {{email.Id}}</span>

这里我需要为上述 HTML 指定类型私人".如何将 user[0].Email.Type 映射到 Type.ID 并获取适当的 >Type.Name

Here I need to Specify the Type "Private" for the above HTML. How to Map the user[0].Email.Type to Type.ID and fetch the appropriate Type.Name

请使用 HTML 级别而非 JavaScript 级别过滤条件.请帮助我.

Kindly filter the condition using HTML Level not in JavaScript Level. Kindly assist me.

推荐答案

我建议用代码而不是标记来做，但如果你需要这是一种映射到类型的方法:

I would suggest doing it in code rather than the markup, but if you need this is one way you can map to Type:

<span
ng-repeat="email in collection.user[0].Email| filter: {IsPreffered : true} "
ng-if="$last">
    Email : {{email.Id}} ,
    <span ng-repeat="typename in typeCollection.Type|filter:{ID : email.Type}">
        Type: {{typename.Name}}
    </span>
</span>

typeCollection 在哪里:

where typeCollection is :

$scope.typeCollection = {
    "Type": [{
      "ID": 1,
      "Name": "Private"
    }, {
      "ID": 2,
      "Name": "Home"
    }, {
      "ID": 3,
      "Name": "Business"
    }, ]
  };

请注意，您需要在标记中再添加一个 ng-repeat，因为过滤器适用于数组.

Please note that you needed one more ng-repeat in markup because filter works on an array.

您也可以使用 ng-init 执行此操作:

You can also do this using ng-init:

<span
ng-repeat="email in collection.user[0].Email| filter: {IsPreffered : true} "
ng-if="$last">
    Email : {{email.Id}} ,
    <span ng-init="types = (typeCollection.Type|filter:{ID : email.Type})">
        Type: {{types[0].Name}}
    </span>
</span>

这篇关于使用 AngularJS HTML 映射两个集合(内部连接)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！