如何使用帶有angular.js和angularmaterial的ngif隱藏DOM中的元素？

Question

我正在使用angular.js 1.5和前端的角度材料來加載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代表同樣的問題

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

---

這是從評論中回答您的問題的示例 。 請注意：

• 我們無法通過引用進行比較，因為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 tage不能直接在另一個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