フィルタリングされた配列が含まれている場合のng-show

Question

配列内に特定の値が含まれている場合にのみhtml要素を表示する方法が見つかりません。 私が持っているのであれば：

people[ 
    { 
     id:1, name: 'frank', type: 'good' 
     ,id:2, name: 'john', type: 'bad' 
     ,id:3, name: 'mary', type: 'good' 
    } 
] 

私は種類の見出しのいくつかの種類を表示したいと思います。 種類があるのであれば：

"great" 
"good" 
"bad" 

上記の配列で、「偉大な」の見出しが表示されないはずです。

私はngifとngshowの両方で試しました。問題は構文に関するようです。 私が試した最後のものは次のとおりです。

(people|filter:(type:'great')) 

しかし、私は、コンソールにエラーが発生します。

これをHTMLで直接修正することは可能ですか、この種の操作のためにコントローラに依存する必要がありますか？

Answer 1

まず、あなたの例「アレイ」はひどく形成されて、私はあなたが意味するものと仮定しています：

people = [ 
    { id:1, name: 'frank', type: 'good' }, 
    { id:2, name: 'john', type: 'bad' }, 
    { id:3, name: 'mary', type: 'good' } 
]; 

第二に、あなたの質問少し混乱ですが、私はあなたが下に一人一人を表示したいと仮定していますその型に対応するヘッダー、および人がいないヘッダーを非表示にします。これを試してみてください：

<div ng-if="$filter('filter')(people,{type:'great'}).length > 0"> 
    <h1>Great</h1> 
    <p ng-repeat="person in people | filter:{type:'great'}">{{person.name}}</p> 
</div> 
<div ng-if="$filter('filter')(people,{type:'good'}).length > 0"> 
    <h1>Good</h1> 
    <p ng-repeat="person in people | filter:{type:'good'}">{{person.name}}</p> 
</div> 

あなたが好きな二番目の配列作成することによって、これを改善することができます

types = [ 
    { id: 'great', header: 'Great' }, 
    { id: 'good', header: 'Good' }, 
    { id: 'bad', header: 'Bad' } 
]; 

そしてちょうど巣あなたのリピート：私は持っていない

<div ng-repeat="type in types" ng-if="$filter('filter')(people,{type:type.id}).length > 0"> 
    <h1>{{type.header}}</h1> 
    <p ng-repeat="person in people | filter:{type:type.id}">{{person.name}}</p> 
</div> 

• 注意このコードをテストして、それを見てみました。おそらくバグを含んでいるかもしれませんが、その方法はうまくいくはずです。
• あなたはあなたのコントローラの依存関係として$フィルタを追加する必要があり、それ

TLを注入します/ DRは、次のとおりです。$フィルタサービスを使用すると、JS式で角度フィルタを使用することができます。 'フィルター'フィルターは配列を返しますので、人をフィルターして長さを確認してください。