使用 AngularJS HTML 映射两个 Collections（内部联接）

Question

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

{ "user" : [
    {
        "Name" : "B. Balamanigandan",
        "Email": [
            {
                "Id": "bala@gmail.com",
                "IsPreffered": true,
                "Type": 1,
            },
            {
                "Id": "mani@gmail.com",
                "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指定类型“Private”。如何将 user[0].Email.Type 映射到 Type.ID 并获取适当的 Type.Name

请使用 HTML 级别而不是 JavaScript 级别过滤条件。请帮助我。

Answer 1

我建议用代码而不是标记来完成，但如果您需要，这是一种可以映射到类型的方法：

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

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

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

编辑：你也可以使用 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>

Answer 2

for(var i = 0; i < Type.length ; i++)
{ 
   if(user[0].Email.Type to Type[i].ID)
   {
      user[0].Email.TypeName = Type[i].ID;
   }
};

Html

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

使用 AngularJS HTML 映射两个 Collections（内部联接）

Map two Collections (Inner Join) using AngularJS HTML

html

json

angularjs

angularjs-scope

angularjs-filter