Question

我有一个酒店系统需要分割日期（停留时间），用户在datepicker中选择开始日期（Check-In）和EndDate（结账）。像这样：

＆＃13;

<div class="datebox">
    <input type="text" show-button-bar='false' class="form-control biginput" datepicker-popup ng-model="lodging.checkIn" is-open="checkin" datepicker-options="dateOptions" ng-required="true" close-text="Close"/>
    <span class="dateicon" style='right:5px;' ng-click="openCheckIn($event)"></span> 
</div>
<div class="datebox">
    <input type="text" show-button-bar='false'
        class="form-control biginput" datepicker-popup
        ng-model="Lodging.checkOut" is-open="checkout" min-date='lodging.checkIn'
        datepicker-options="dateOptions" ng-required="true"
        close-text="Close" />
    <span class="dateicon" style='right:5px;' ng-click="openCheckOut($event)"></span>
</div>

＆＃13;

用户将从两个日期选择器上方选择入住和退房日。我需要拆分每次住宿的信息，如果我选择办理登机手续：2015年1月11日退房：2015年5月11日，我需要创建一张桌子，以显示每次入住的费用从2015年11月11日至2015年5月11日。它将如下表所示：

Date           Amount
11/01/2015     109
11/02/2015     120
11/03/2015     101
11/04/2015     99

如何分割持续时间日期（如表格的第一列）并将它们放入表格的ng-repeat中？

Answer 1

首先，使用ng-repeat

准备你的桌子

<table ng-init="loadStays()" ng-if="stays">
  <thead>
    <tr>
      <th>Date</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="stay in stays | between:lodging.checkIn:lodging.checkOut">
      <td>{{ stay.date | date : 'mm-dd-yyyy' }}</td>
      <td>{{ stay.amount }}</td>
    </tr>
  </tbody>
</table>

然后，创建一个过滤器，仅显示日期和日期之间的项目（如果我正确理解您的问题）

// For parse a date in format: 'mm-dd-yyyy'
// If you have to parse the date from your item (maybe datetime ?)
// Use the built-in date filter
// like date = $filter('date')(item.date, 'mm-dd-yyyy')
parseDate = function(input) {
    var parts = input.split('-');
    return new Date(parts[1]-1, parts[2], parts[0]);
};

// Create the filter assuming app is your module.
app.filter('between', function() {
  return function(items, from, to) {
      filtered = [];
      var dateFrom = parseDate(from);
      var dateTo = parseDate(to);
      if (from == '' && to == '')
          return items;
      filtered = items.filter(function(item) {
        if (from !== '' && to == '') {
          return item.date >= dateFrom;
        } else if (from == '' && to !== '') {
            return item.date <= dateFrom;
        } else if (from !== '' && to !== '') {
            return item.date >= dateFrom && item.date <= dateTo
        }
      });

      return filtered;
  };
});

使用此代码，系统会动态过滤停留，并且用户只会看到您在rent.checkIn和logding.checkOut日期之间使用date属性的项目，这些日期取自datepicker ng-models。

如果您不知道如何从服务器获取检索，请使用以下内容：

// Retrieve stays from yourdomain/stays
$scope.loadStays = function() {
    $http.get('stays').then(function(response) {
        $scope.stays = response.data;
    }, function(response) {
        console.log(response);
    });
};

如何根据angularjs中的签入和签出日期拆分日期？

1 个答案: