AngularJS - ng-repeatの未定義プロパティのフィルタ？

Question

私のAngularJSプロジェクト（v1.2.3）には、ルートのリストがあり、オブジェクトからナビゲーションバーを作成しようとしています。私がしたいのは、あるスタイルで定義されていないisRightのオブジェクトを表示し、別のスタイルでそのプロパティが定義されている場所を表示することです。

ng-repeat私はこれらのオブジェクトを定義されていないisRightプロパティでフィルタリングしたいと思います。カスタムフィルター機能の作成に頼ることなく、ng-repeat属性内でこれをどのように達成できますか？

$scope.nav = [ 
    { path: '/', title: 'Home' }, 
    { path: '/blog', title: 'Blog' }, 
    { path: '/about', title: 'About' }, 
    { path: '/login', title: 'Login', isRight: true } 
]; 

私はちょうど各オブジェクトに属性isRight: falseを追加することができます実現、または左右のサイドリンク、および他のこのような簡単な回避策については、別のnavオブジェクトを持っていますが、これを実現する方法がある場合、私は好奇心現在の構造で、の線に沿って何か使用して：

<li ng-repeat="link in nav | filter:{isRight:undefined}"> 

する。これは、必要以上に好奇心ですが、私はどんな提案を感謝しています。

Answer 1

であるためにあなたの繰り返しを変更するメソッドを作成します。したがって、undefinedを処理する代わりに、isRightが（!）でないものを除外することができます。このように：

<li ng-repeat="link in nav | filter:{isRight:'!true'} "> 

そして、あなたができる反対のために、当然のことながら、実行します。

<li ng-repeat="link in nav | filter:{isRight:'true'} "> 

demo fiddle

Answer 2

編集

私は質問を再読し、これはあなたが探している答えではありません。ドキュメントの目的でここに残しておきますが、カスタムフィルタを作成せずにカスタムフィルタ関数を使用することなく、必要な機能を得る方法はないと思います。

未定義を探すのがデフォルトのフィルタで機能しない理由は、AngularJS filterの実装のコードです。

switch (typeof expression) { 
    ... 
    case "object": 
    // jshint +W086 
    for (var key in expression) { 
     (function(path) { 
     if (typeof expression[path] == 'undefined') return; 
     predicates.push(function(value) { 
      return search(path == '$' ? value : getter(value, path), expression[path]); 
     }); 
     })(key); 
    } 
    break; 
    ... 
} 

フィルタオブジェクトのプロパティの値がundefinedある場合、述語関数は、述部の配列に追加されません。あなたの場合、isRightプロパティの値をundefined（フィルタ式は{isRight:undefined}）に設定しています。

オリジナル回答

あなたは常に、任意のフィルタを作成するために、述語関数を使用することができます（documentation）。

述語関数を使用して任意のフィルタを書き込むことができます。配列の要素ごとに 関数が呼び出されます。最終結果は、述部がtrueを戻した要素の配列 です。お使いのコントローラで

あなたは

$scope.isRightUndefined = function(item) { 
    return item.isRight === undefined; 
} 

をしたい項目を選んで、あなたは、フィルタ式を否定することができます

<li ng-repeat="link in nav | filter:isRightUndefined"> 

Answer 3

module.filter('notNullOrUndefined', [function() { 
    return function (items, property) { 
     var arrayToReturn = []; 
     for (var i = 0; i < items.length; i++) { 
      var test = property !== undefined ? items[i][property] : items[i]; 
      if (test !== undefined && test !== null) { 
       arrayToReturn.push(items[i]); 
      } 
     } 
     return arrayToReturn; 
    }; 
}]); 

使用法：あなたが使用することもでき

<div class="col-md-12" ng-repeat="style in styles | notNullOrUndefined:'background'"> 
    <span class="ed-item">{{style.name}} Background</span> 
</div> 

Answer 4

を <li ng-repeat="link in nav | filter:{isRight:'!'}">

How to display placeholders in AngularJS for undefined expression values?

var app = angular.module('myApp', []) 
 

 
app.controller('mainCtrl',['$scope' , function($scope) { 
 

 

 
$scope.nav = [ 
 
    { path: '/', title: 'Home' }, 
 
    { path: '/blog', title: 'Blog' }, 
 
    { path: '/about', title: 'About' }, 
 
    { path: '/login', title: 'Login', isRight: true } 
 
]; 
 
    
 
}])

<div ng-app="myApp" ng-controller="mainCtrl"> 
 

 
<h3>!isRight</h3> 
 
<ul> 
 
<li ng-repeat="link in nav | filter:{isRight:'!'}">{{link.title}}</li> 
 
</ul> 
 
    
 
    
 
<h3>isRight</h3> 
 
<ul> 
 
<li ng-repeat="link in nav | filter:{isRight:'!!'}">{{link.title}}</li> 
 
</ul> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>