ng-if 1以外のページ内のすべての要素を非表示にする場合

Question

私のページにはng-ifを使用する複数のdivがあります。私の問題は、特定の要素が重複していることです。

私がしたいのは、これらの重複する要素を隠すために、以下に追加したこの例ではng-ifの別の式を使用しています。私の考えは投稿IDを使用するクラスを追加することです重複する要素は同じIDを共有します。

<div ng-repeat="post in postList"> 
    <div class="{{post.id}}" ng-if="post.cat.length > 0 && hideMultiplePost(post.id)"> 
</div> 

<div ng-repeat="post in postListV2"> 
    <div class="{{post.id}}" ng-if="post.cat.length > 0 && hideMultiplePost(post.id)"> 
</div> 

は、誰かが私が重複したクラスをチェックし、私はそれらをすべて除外したくないとして、それらをフロントエンドからそれらを除外するが、1つを残しての式（hideMultiplePost）を使用して正しい方向に私を置くことができます。

Answer 1

データを制御できない場合は、フィルタを使用してダストを削除できます。私はそれがng-repeatだと仮定しましたが、あなた自身のために編集することができます。フィドルの詳細。その後、あなたのコントローラで 連結方式の二つのソース（postListとpostListV2）、および重複排除するためにフィルタを使用します：

<div ng-repeat="item in data | dedupe:'id'"> 
     {{item.id}}: {{item.name}} 
    </div> 

編集フィドルで

function MyCtrl($scope) { 
    $scope.postList = postList; 
    $scope.data = $scope.postList.concat(postListV2) 
} 

さらに詳しい情報： http://jsfiddle.net/Lvc0u55v/7736/

Answer 2

をあなたは、角度UIによって提供される既存の「ユニークな」フィルタを使用することができます。

独自のフィルタを使用すると、モデル内で一意でなければならないフィールドを指定できます。あなたの投稿のすべてにidがあり、このidは一意であると仮定します。このフィールドに基づいて複数の投稿を除外することができます。

適用されたフィルタの後に、ng-ifステートメントを使用して、投稿にカテゴリが含まれているかどうかを確認できます。

これを使用する方法の詳細については、スニペットを確認してください。

angular 
 
    .module('app', ['ui.filters']); 
 

 
angular 
 
    .module('app') 
 
    .controller('PostListController', PostListController); 
 

 
function PostListController() { 
 
    var vm = this; 
 
    vm.posts = getPosts(); 
 
} 
 

 

 
function getPosts() { 
 
    return [{ 
 
    "id": 1, 
 
    "title": "Post Title", 
 
    "content": "Post content here" 
 
    }, { 
 
    "id": 2, 
 
    "title": "Post Title", 
 
    "content": "Post content here" 
 
    }, { 
 
    "id": 3, 
 
    "title": "Post Title", 
 
    "content": "Post content here" 
 
    }, { 
 
    "id": 4, 
 
    "title": "Post Title", 
 
    "content": "Post content here" 
 
    }, { 
 
    "id": 5, 
 
    "title": "Post Title", 
 
    "content": "Post content here" 
 
    }, { 
 
    "id": 3, 
 
    "title": "Post Title", 
 
    "content": "Post content here" 
 
    }, { 
 
    "id": 4, 
 
    "title": "Post Title", 
 
    "content": "Post content here" 
 
    }]; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script> 
 

 
<div ng-app="app"> 
 

 
    <div ng-controller="PostListController as vm"> 
 
    
 
    <ul> 
 
     <li ng-repeat="post in vm.posts | unique:'id'"> 
 
     <b>#{{ post.id }} {{ post.title }} </b><br /> 
 
     <p>{{ post.content }}</p> 
 
     </li> 
 
    </ul> 
 

 
    </div> 
 

 
</div>