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

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

假设您的数据结构不是一成不变的，只需将其更改为对您要完成的工作更友好。 IE。制作一系列周，然后将他们应该拥有的任何日子放入其中。

我不知道你究竟想在这里做什么，但可以说它是一个日历应用程序。所以你的日子实际上也有属性。你确实提到了你在那些日子里有约会，所以为什么不采用实际的 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 数组。然后使用相同的设置迭代数周，然后迭代数天。

如果数据存在约束，您能否进一步解释一下约束是什么以及是否存在任何其他约束。如果没有限制，您应该考虑将您的信息重新组织成不同的结构。