Question

我试图显示一个包含活动的表格，其中一行显示当天，之后显示当天的活动列表。我还希望用户能够过滤活动。＆＃34; myActivities＆＃34;是一个地图，其中用户的活动分配为true，其余为false。我的代码看起来像这样：

<table>
<tbody ng-repeat="date in dates">
<tr><td>{{date.day}}</td></tr>
<tr ng-repeat="activity in date.activities" ng-show="myActivities[activity.id] == true">
    <td>{{activity.time}}</td><td>{{activity.name}}</td>
</tr>
</tbody>
</table>

问题是当有一天没有相关活动的用户时，仍会显示显示日期的行，但隐藏其下的所有活动。我用这个函数成功地解决了这个问题：

$scope.checkDate = function(activities)
{
    activities.forEach(function(activity){
        if (myActivities[activity.id] == true) return true;
    });
    return false;
}
 //added the ng-show to the tbody in the html:
<tbody ng-repeat="date in dates" ng-show="checkDate(date.activities)">

它完美无缺，但这是最好的解决方案吗？我觉得有一个更好的解决方案。任何想法？

谢谢！

Answer 1

您可以将过滤后的变量分配给日期对象，并检查该属性的长度：

<table>
    <tbody ng-repeat="date in dates" 
           ng-show="date.filteredActivities.length">
        <tr>
            <td>{{ date.day }}</td>
        </tr>
        <tr ng-repeat="activity in (date.filteredActivities = (date.activities | filter: { active: true }))">
            <td>{{ activity.time }}</td>
            <td>{{ activity.name }}</td>
        </tr>
    </tbody>
</table>

当所有行都隐藏在angularjs中时隐藏表体

1 个答案: