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

Question

我在前端使用 angular.js 1.5 和 angular material 来使用数据库中的对象加载 DOM。在其中一个中继器中，我需要检查一个对象是否已包含在另一个范围内 javascript 数组中。我尝试使用 Array.indexOf()、Array.forEach 和循环遍历每个元素的标准来做到这一点，但它并没有按照我需要的方式发生。我一定是在做一些愚蠢的事情，阻止逻辑正常地运行，理想情况下，如果当前对象存在于数组中，方法应该 return false，如果不存在则为 true。

用例是用户需要将项目 ObjA 从另一个列表 (Objs)[=18= 添加到列表 (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;
     }
 }

我也试过匹配object 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根据评论回答你的问题。关注：

我们无法通过引用进行比较，因为 friend.skills 与我们通常拥有的对象不同 skills list。这就是为什么比较 name 属性.
使用 filter 而不是 ng-if 来过滤 "used" 技能列表会更干净

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;
}

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

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

How to hide an element from DOM using ngif with angular.js and angularmaterial?

javascript

arrays

angularjs

angular-material