Question

我正在尝试打印一个时间表，每周都有一些事情发生在星期一，而另外两天则是每隔一周轮流发生一次。

预期输出为：

周一

星期三

星期五

周一

星期二

星期四

周一

星期三

星期五

周一

星期二

星期四

周一

星期三

星期五

周二每周交替，周三和周四交替出现在周五。

这是我的数据：

$scope.weekdays = [
	{name: 'Monday'},
	{name: 'Tuesday'},
	{name: 'Wednesday'},
	{name: 'Thursday'},
	{name: 'Friday'},
];

这是我的代码：

<div ng-repeat="i in numOfWeeks(5) track by $index"> //numOfWeeks returns array of length 5
	<ul>
		<li ng-repeat="day in weekdays">
			{{day.name}}
		</li>
	</ul>
</div>

我似乎无法弄清楚如何让它有条不紊地显示一周中的几天，以便输出所需的结果。

该示例仅显示5周，但实际上将持续数周，这就是为什么我试图弄清楚如何以编程方式执行此操作。

谢谢。

Answer 1

您可以创建一个自定义过滤器函数，该函数将周数作为参数来确定要应用的数组过滤器。下面的示例应用一个简单的过滤器，基于周数是奇数还是偶数（适用于您的示例） - weekNo % 2 - 但它可以包含任何类型的逻辑。

$scope.filterDay = function(weekNo) {
  return function(day) {
    if (weekNo % 2) {
      return ["Monday", "Tuesday", "Thursday"].indexOf(day.name) > -1;
    } else {
      return ["Monday", "Wednesday", "Friday"].indexOf(day.name) > -1;
    }
  };
};

你这样应用它：

<div ng-repeat="week in [1, 2, 3, 4, 5, 6]">
  <div ng-repeat="day in weekdays | filter:filterDay(week)">
    {{day.name}}
  </div>
  <hr>
</div>

plunker

Answer 2

假设您的数据结构不是一成不变的，只需将其更改为对您要完成的内容更加友好。 I.E.制作一个星期的数组，并在他们应该拥有的任何日子里投入它们。

我不知道你到底要去哪里，但我们可以说这是一个日历应用程序。所以你的日子实际上也有属性。你确实提到过那些日子你有预约，所以为什么不采用实际的OO方法，并以那种方式进行预约

Day1 = { name: 'Monday', appointmentHourStart: '12', appointmentHourEnd: '14'};
Day2 = { name: 'Tuesday', appointmentHourStart: '12', appointmentHourEnd: '14'};
Day3 = { name: 'Wednesday', appointmentHourStart: '8', appointmentHourEnd: '10'};
Day4 = { name: 'Thursday', appointmentHourStart: '12', appointmentHourEnd: '14'};
Day5 = { name: 'Friday', appointmentHourStart: '10', appointmentHourEnd: '12'};
Week1 = { Day1, Day2, Day4 };
Week2 = { Day1, Day3, Day5 };
.
.
.
etc.

Weeks:    [ Week1, Week2, Week3, etc.]

然后你有你的对象迭代 -

<div ng-repeat="Week in Weeks track by $index">
    <ul>
        <li ng-repeat="day in Week">
            {{day.name}} :: {{day.appointmentHourStart}} - {{day.appointmentHourEnd}}
        </li>
    </ul>
</div>

您可以轻松地将您想要称为“每日”对象的任何内容集合推送到Weeks数组中。然后使用相同的设置迭代几周，然后重复几天。

如果数据周围存在约束，您能否就限制条件以及是否存在任何其他约束给出更多解释。如果没有约束，您应该考虑将您的信息重组为不同的结构。

Angular：我如何有条件地使用ng-repeat？

2 个答案: