Скрытие тела таблицы, когда все строки скрыты в angularjs

0

Я пытаюсь отобразить таблицу с действиями, причем строка отображает день и после этого список действий на этот день. Я также хочу, чтобы пользователь мог фильтровать действия. "myActivities" - это карта с действиями пользователя, назначенными 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)">

Он отлично работает, но это лучшее решение? У меня такое ощущение, что есть более приятное решение. есть идеи?

Благодарю!

Теги:

1 ответ

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>
  • 0
    Спасибо! Я не думаю, что я полностью понимаю нг-повтор. Можете ли вы объяснить, что именно делает ng-repeat = "активность в (date.filteredActivities = date.activities)"?
  • 0
    Вы используете ng-show в строке активности, но для этого можно использовать угловой фильтр. Отфильтрованные данные могут быть назначены переменной ( date.filteredActivities ), которую можно затем проверить на количество объектов.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню