Question

我使用AngularJS按日和时间显示会议会话列表，以便当天有一个标题，然后是白天每个时段的标题，然后是预定的会话列表那个时段。

会话还启用了过滤器，以便用户可以根据许多属性进行过滤，例如标题或类别。

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

以下是我使用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>

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

以下是提供ScheduleSessions的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参数包含此单个记录详细信息。

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

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

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

1 个答案: