Я пытаюсь отобразить таблицу с действиями, причем строка отображает день и после этого список действий на этот день. Я также хочу, чтобы пользователь мог фильтровать действия. "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)">
Он отлично работает, но это лучшее решение? У меня такое ощущение, что есть более приятное решение. есть идеи?
Благодарю!
Вы можете назначить фильтрованные переменные объекту даты и проверить длину этого свойства:
<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>
ng-show
в строке активности, но для этого можно использовать угловой фильтр. Отфильтрованные данные могут быть назначены переменной (date.filteredActivities
), которую можно затем проверить на количество объектов.