web-dev-qa-db-ja.com

Angularjsフィルターがnullではありません

Nullではない特定のプロパティを持つアイテムを除外しようとしています。

var details = [{name:'Bill', shortDescription: null}, {name:'Sally', shortDescription: 'A girl'}]

Liを1つだけ表示したいと思います。サリー用です。これは私が成功せずに試したものです

<ul>
<li ng-repeat="detail in details | filter:{shortDescription:'!'}">
<p>{{detail.shortDescription}}</p>
</li>
</ul>

カスタムフィルターを作成せずにこれをどのように行うことができますか？それとも、カスタムフィルターはどのように見えますか？

javascriptangularjsangularjs-filter
69
Scotty Bollinger

https://github.com/angular/angular.js/issues/1157 によると、Angular> = 1.4の場合、推奨はを使用することです。 null /未定義。

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: ''}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>
38
skalb

角度> = 1.3.16から最新（書き込み/更新時は1.5.5）''（空の文字列）を使用します（または'!!'も機能します）

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: ''}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>

例： http://jsfiddle.net/TheSharpieOne/1mnachk6/

角度> = 1.3.6および<= 1.3.15は'!null'を使用します

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: '!null'}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>

例： http://jsfiddle.net/TheSharpieOne/4wxs67yv/

角度> = 1.2および<= 1.3.5は''（空の文字列）を使用します（または'!!'も機能します）

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: ''}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>

例： http://jsfiddle.net/TheSharpieOne/ovsqf17n/

角度<1.2 '!!'

<ul>
    <li ng-repeat="detail in details | filter:{shortDescription: '!!'}">
        <p>{{detail.shortDescription}}</p>
    </li>
</ul>

例： http://jsfiddle.net/TheSharpieOne/RGEdc/

全体として、'!!'のサポートが最も優れていますが、 ''（空の文字列）が推奨されており、これを目的としています 。

123
TheSharpieOne

これは読みやすいと思います

 <ul>
    <li ng-repeat="detail in details" ng-if="detail.shortDescription">
        <p>{{detail.shortDescription}}</p>
    </li>
 </ul>
5
Jens Alenius

空の引用符ソリューションを使用するには、コンパレータをデフォルトのfalseのままにする必要があることに注意してください。次のように、コントローラーフィルターでtrueを設定することに慣れているかもしれません。

const myAssessments = 
       this.filterFilter(this.assessments, {userId: this.user.id}, true);

このタイプの厳密なフィルターは、最後のtrueなしでは機能しません。ただし、null以外のチェックを機能させるには、trueをドロップするかfalseにする必要があります。

const activeAndHistoric = 
      this.filterFilter(filteredAssessments, {historicYear: ''}, false);
1
IrishDubGuy