在 AngularJS 中使用模板和过滤答案

【问题标题】：Using templating and filtering in AngularJS在 AngularJS 中使用模板和过滤
【发布时间】：2014-11-12 13:44:38
【问题描述】：

我对 Angular 还是很陌生，但遇到了一个问题。我希望有一个简单的方法来解决这个问题。

基本上，我有一个从服务器检索到的约会列表。

$scope.appointments = [{starts_at: "2015-1-1", name: "First"}, {starts_at: "2015-1-1", name: "Last"}, {starts_at: "2015-1-2", name: "Next Day"}];

现在我想在列表中显示这些约会。我决定我可以为此使用ng-repeat + 过滤器，但现在我被卡住了。

<ion-slide-box on-slide-changed="slideHasChanged($index)">
  <ion-slide>
    <div class='box'>
      <div class="list list-inset" ng-repeat="appt in appointments | filter:????>
        <div class="item" ng-click="openAppointmentModal(appt)">
          <span>Appt {{appt.name}}</span>
          <span>Starts at {{appt.starts_at}}</span>
        </div>
      </div>
    </div>
  </ion-slide>
</ion-slide-box>

我不确定是否可以使用内置的filterFilter 来执行此操作，所以我最终编写了自己的过滤器filterDateFilter，它接收一个数组、一个属性名称以及您想要的日期过滤。然后我可以写类似ng-repeat='appt in appointments | filterDate:starts_at:curDate' 的东西，其中curDate 由控制器中的$scope.curDate = new Date() 定义。

呸。这有效，但仅适用于过滤 $scope.curDate 定义的任何内容。

现在，我希望用户能够滑动到前几天/后几天，并且只显示当天的约会。我假设我必须将<ion-slide> 移动到模板，但我不确定从那里去哪里。 我的下一步是什么？

很抱歉，这篇文章很长，解释很详细，但我不想只是抛出一个问题而没有表现出以前的努力。

【问题讨论】：

您需要使用 ng-repeat 创建三个 ion-slide。你需要一个数组来保存那三张幻灯片。如果可以，请创建一个小提琴。
@wayne 你是什么意思？我不需要无限数量的幻灯片吗？以及如何根据我的日期更改过滤器？
啊，我明白了。你误解了我的意思，我希望用户能够在任何一个方向上滑动只要他/她想要。不只是接下来和前几天
不，您创建最少 3 张幻灯片，在 $scope.slideHasChanged($index) 中您需要做几件事。更新$scope.curDate +1 天或 -1 天。将一个对象插入到您绑定到 ion-slide 的模型中，以便创建新的幻灯片。可选地，您可以从阵列中删除一张，因此您只保留 3 张幻灯片。

标签： javascript angularjs angularjs-ng-repeat ionic-framework

【解决方案1】：

我认为，您可以使用 ionic on-slide-left 和 on-slide-right 指令来调用您在控制器中定义的函数，该函数将 $scope.curDate 递增或递减 1，而不是 ion-slide。这似乎是一个更简单的替代方案我比模拟无限幻灯片。

http://ionicframework.com/docs/api/directive/onSwipeLeft/

【讨论】：