如何使用angular.js和angularmaterial中的ngif从DOM中隐藏一个元素？

Question

我正在使用 Angular.js 1.5 以及 Angular Material 来在前端从数据库加载对象并加载 DOM。在其中一个重复器中，我需要检查一个对象是否已经包含在另一个作用域内的 JavaScript 数组中。我尝试使用 Array.indexOf()，Array.forEach，使用标准 for 循环遍历每个元素，但它没有按照我所需的方式发生。我一定做了什么愚蠢的事情阻止了逻辑的正常运行，理想情况下，如果当前对象存在于数组中，则该方法应返回 false ，否则返回 true。

用例是用户需要将项（ObjA）添加到另一个列表（Objs）中的列表中（ObjX.Objs）。

我的前端 HTML 代码：

//here there's an object that contains an array of objects 
<div ng-controller="myFirstController" ng-init="findOne()">
<md-list-item ng-repeat="ObjA in ObjX.Objs" >
</md-list-item>
<div ng-controller="mySecondcontroller" ng-init="find()">
<md-list-item ng-repeat="ObjA in Objs" ng-if="ObjAExists(ObjA, ObjX.Objs)">
</md-list-item>
</div>
</div>

控制器方法：

 $scope.ObjAExists = function(ObjA, list){
     for(var m = 0; m<list.length; m++){
         if(list[m] === ObjA){
             return false;
         }
         else return true;
     }
 }

我也尝试匹配对象ID，但没有任何区别。

 $scope.ObjAExists = function(ObjA, list){
     for(var m = 0; m<list.length; m++){
         if(list[m]._id == ObjA._id){
             return false;
         }
         else return true;
     }
 }

技能筛选 plunk 这是我编写的一个 plunk，展示了相同的问题。

- Osama Salama

---

最好使用过滤器。还需要知道两个数组中是否有相同的对象引用。 - charlietfl

Answer 1

您正在将ObjA仅与列表中的第一个元素进行比较。您应该将for循环外的return true;提取出来。

$scope.ObjAExists = function(ObjA, list){
 for(var m = 0; m<list.length; m++){
     if(list[m]._id == ObjA._id){
         return false;
     }
 }
 return true;
}

* 方法的名称肯定应该是..NotExists

---

这里是回答你在评论中提出问题的示例。请注意：

• 我们不能通过引用进行比较，因为friend.skills不是我们通常拥有的skills list中相同的对象。所以按name属性进行比较。
• 过滤“used”技能列表最好使用filter而不是ng-if

- Aleksey L.

---

那样做之后，除了编写ng-if =“true”之外，我所做的任何其他事情都会隐藏ObjA列表中的所有元素，这意味着相等性评估出了问题，否则，因为我知道某些元素已经存在于对象数组ObjX.Objs中。 - Osama Salama

@charlietfl，这确实是这样的，每次 'ng-repeat' 循环时都会分配 '<md-list-item ng-repeat="ObjA in Objs" ng-if="ObjAExists(ObjA, ObjX.Objs)">'。 - Osama Salama

@charlietfl - 方法名字有点反了 :), 但是循环逻辑符合要求——如果当前对象存在于数组中，该方法应返回false_ - Aleksey L.

@OsamaSalama - 请尝试添加一些日志。如果您可以在Plunker中安排一个演示，那会更容易帮助您。 - Aleksey L.

@AlekseyL。我会重写控制器中的JavaScript对象代码，以帮助您了解视图是如何呈现的。 - Osama Salama

这里是plunk链接（https://plnkr.co/edit/Mcj5fjPilXQSyK4UN2nq?p=preview）。 在下面的列表中，重复显示技能的目的是仅显示所有朋友的friend.skills数组中不存在的技能。 - Osama Salama

Answer 2

在你的代码中。

<ul>
  <li ng-repeat="friend in friends">
   <li ng-repeat="skill in skills" ng-if="skillExists(skill,friend.skills)">{{skill.name}}
   </li>
</ul>

li标签不能直接在另一个li标签下使用。因为你是这样使用的friend.skill，所以skillExists不起作用的原因之一是friend.skill未定义。

现在根据我的经验，在你的skillExists方法中，我建议你不要直接比较两个对象。始终尝试使用id或一些唯一属性来区分每个对象，并且该键应用于对象比较。因此，在这里，您应该使用name属性而不是比较整个对象。

你的代码

if(list[i]===skill){
      return false;
 }

使用以下内容代替

if(list[i].name === skill.name){
      return false;
}

这是一个工作示例的链接。https://plnkr.co/edit/mvskLPsTH8eJv6OfPFsB

- nextt1

---

谢谢，你关于friend.skill的可用性是正确的，它未定义到下一个<li>标签。此外，不可能将friend.skills中的每个单独技能与skill进行比较。Aleksey L.提供的答案正好满足我的需求，即根据另一个数组中不包含的内容过滤结果。 - Osama Salama

完全没有问题。我只是告诉你代码中的错误。 - nextt1