javascript - ng-显示过滤后的数组是否包含

Question

我无法找到一种方法，仅当数组在其对象中包含特定值时才显示 html 元素。所以如果我有:

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

我想显示某种类型的标题。因此，如果类型是:

"great"
"good"
"bad"

对于上面的数组，“great”的标题不应该是可见的。

我尝试过 ngif 和 ngshow。问题似乎与语法有关。我尝试的最后一个是:

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

但是我在控制台中收到错误。

是否可以直接在html中修复它，或者我应该依赖 Controller 来进行这种操作？

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>

• 请注意，我尚未测试此代码，只是查看了它。它可能包含错误，但该方法应该有效。
• 您需要添加 $filter 作为 Controller 的依赖项，并将其注入(inject)

TL/DR 是:$filter 服务允许您在 JS 表达式中使用 Angular 过滤器。 “filter”过滤器返回一个数组，因此过滤您的人员并检查长度。