javascript - 使用 AngularJs，当子集合中的数据被过滤掉时，如何隐藏元素？

Question

我正在使用 AngularJS 按日期和时间显示 session session 列表，其中有当天的标题，后跟一天中每个时间段的标题，然后是为此安排的 session 列表时段。

session 还启用了过滤器，以便用户可以根据多个属性(例如标题或类别)进行过滤。

我想要完成的是，如果用户的过滤器删除了该时间段或一天中的所有 session ，则隐藏日期和/或时间标题。我目前能够隐藏时间段 header (因为 session 是该对象上的直接子集合)，但如果当天的所有 session 都被过滤掉，我无法找到隐藏日 header 的方法(因为 session 不能立即在对象上可用)。

以下是我与 Angular 标签一起使用的 HTML 示例:

<article ng-repeat="sessionDayGroup in ScheduledSessions" >
    <div><h2>{{ sessionDayGroup.Day }}</h2></div>

    <div ng-repeat="timeslotGroup in sessionDayGroup.TimeSlots">
        <div ng-if="(timeslotGroup.Sessions | filter: { Category: sessions.categoryFilter}).length != 0" >          
            <h2>{{ timeslotGroup.Time }}</h2>
        </div>

        <div ng-repeat="session in timeslotGroup.Sessions | filter: { Category: sessions.categoryFilter}">              
            <div><h3>{{ session.Title }}</h3></div>
        </div>
    </div>    
</article>

请注意，如果应用过滤器后没有 session ，则时隙 h3 header 上的 ng-if 属性会成功隐藏时隙 header 。我需要一个类似的 ng-if 语句(或其他方法)来应用于 sessionDayGroup.Day h2 元素。

以下是为 ScheduleSession 提供数据的 JSON 数据示例:

ScheduledSessions =>
    {
        Day => "Sun 8/17",
        TimeSlots => 
            {
                Time => "8:00 am",
                Session => 
                    { Title = "title 1", Category = "fun"},
                    { Title = "title 2", Category = "fun"},
                    { Title = "title 3", Category = "boring"},
            },
            {
                Time => "9:00 am",
                Session => 
                    { Title = "title 4", Category = "fun"},
                    { Title = "title 5", Category = "fun"},
                    { Title = "title 6", Category = "fun"},
            },
    },
    {
        Day => "Mon 8/18",
        TimeSlots => 
            {
                Time => "8:00 am",
                Session => 
                    { Title = "title 7", Category = "fun"},
                    { Title = "title 8", Category = "fun"},
                    { Title = "title 9", Category = "fun"},
            },
            {
                Time => "9:00 am",
                Session => 
                    { Title = "title 10", Category = "fun"},
                    { Title = "title 11", Category = "fun"},
                    { Title = "title 12", Category = "fun"},
            },
    },

Answer 1

您需要为此创建一个自定义过滤器。

定义自定义过滤器的方式类似于作用域函数:

$scope.myCustomFilter = function (record) {
    //Your custom filter logic here
};

每次循环数组中存在的每条记录都会调用此自定义过滤器函数。 record 参数包含此单个记录的详细信息。

您的自定义过滤器函数应返回一个 bool 值，指示是否应显示记录 - 即是否应将记录包含在循环中。

或者，您可以使用过滤数组，而不是使用包含所有元素的数组。密切关注过滤器，当它们发生变化时，更新过滤后的数组。