如何使用带有angular.js和角度材料的ngif从DOM中隐藏元素？

Question

我正在使用 angular.js 1.5，并在前端使用 angular material 来从数据库中加载带有对象的 DOM。 在其中一个转发器中，我需要检查一个对象是否已经包含在另一个范围内的 javascript 数组中。我尝试使用Array.indexOf() 和Array.forEach 来实现它，并使用标准循环遍历每个元素，但它并没有按照我需要的方式发生。我一定是在做一些愚蠢的事情，这会阻止逻辑正常运行，理想情况下，如果当前对象存在于数组中，则方法应返回 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;
     }
 }

Filter skills plunk 我写了一个代表同样问题的 plunk

Answer 1

您仅将ObjA 与列表中的第一个元素进行比较。您应该将return true; 拉出for 循环。 它将是：

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

* 而且方法的名字当然应该是..NotExists

---

这里是 example 回答 cmets 的问题。注意：

• 我们无法通过引用进行比较，因为friend.skills 与我们通常拥有的skills list 对象不同。这就是与name 属性进行比较的原因。
• 使用filter 而不是ng-if 过滤“已使用”技能列表会更简洁

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 不起作用的原因之一。

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

你的代码

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

代替那个用途

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

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