使用 AngularJS HTML 映射两个集合（内部连接）

Posted 2023-03-05

【中文标题】使用 AngularJS HTML 映射两个集合（内部连接）

【英文标题】：Map two Collections (Inner Join) using AngularJS HTML

【发布时间】：2016-10-20 16:28:02

【问题描述】：

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

 "user" : [
    
        "Name" : "B. Balamanigandan",
        "Email": [
            
                "Id": "[e-mail]",
                "IsPreffered": true,
                "Type": 1,
            ,
            
                "Id": "[e-mail]",
                "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 级别来过滤条件。请帮助我。

【问题讨论】：

请使用 HTML 级别而不是 JavaScript 级别来过滤条件：这样做是错误的。这应该在 JavaScript 中完成。模板不应该处理这种复杂性。控制器正是在那里包含这种逻辑。旁注：preferred 拼写为preferred，而不是prefered。

@JBNizet - 我同意你的看法......但是在 JavaScript 中，LINQ 操作和映射操作以及所有我认为都非常复杂的东西，我需要一个 HTML 级别的解决方案。所以我希望在 HTML 级别的过滤中实现这一点。

JavaScript 是一种编程语言。 Angular 表达式允许做 JS 动态生成 HTML 的一小部分。如果你觉得 JS 太难，那么 HTML 会更难。在 JavaScript 中过滤集合并不难，即使你只知道循环。如果您发现在 JS 中很难做到甚至不知道从哪里开始，那么您应该在使用 Angular 应用程序之前多练习一下编程。您有一个数组，您需要在该数组中找到一个特定元素。这应该不会太难。

可以使用angular.filter等外部模块

【参考方案1】：

我建议在代码中而不是在标记中执行此操作，但如果您需要，这是您可以映射到 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 在哪里：

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

【参考方案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>