IR Punch IR Punch - 5 months ago 58
HTML Question

Map two Collections (Inner Join) using AngularJS HTML

I'm having two Collection

user
and
Type
. I wish to dispay Email ID which is marked as
IsPreffered = TRUE
and I need to map the email.Type to 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 Source Code:

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


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


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

Answer

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>

where typeCollection is :

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

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

EDIT: 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>
Comments