2

我想在表单上实现开始和结束日期，但也允许用户从下拉列表中的一堆预设日期范围中进行选择。如果用户从下拉列表中选择一个值，则会填充开始和结束日期字段。如果用户编辑其中一个字段，则下拉菜单会将其自身设置为“自定义”选择。

我的“天真”实现如下，但很明显，无论字段是由用户还是由控制器更改，所有的手表都会触发。我如何设置我的手表，以便它可以工作？

HTML

<div ng-controller="ExportCtrl">
  <select ng-model="dateRange" ng-options="d.name for d in dateRanges"></select>                                    
  <input type="text" ng-model="startDate" />
  <input type="text" ng-model="endDate" />
 </div>

JS

module.controller("ExportCtrl", function ($scope) {
  $scope.dateRanges = [
          { name: 'Custom', startDate: null, endDate: null },
          { name: 'Today', startDate: moment().startOf('day'), endDate: moment().endOf('day') },
          { name: 'Yesterday', startDate: moment().subtract('day', 1).startOf('day'), endDate: moment().subtract('day', 1).endOf('day') },
          { name: 'Last 3 days', startDate: moment().subtract('day', 2).startOf('day'), endDate: moment().endOf('day') },
          { name: 'Last 7 days', startDate: moment().subtract('day', 6).startOf('day'), endDate: moment().endOf('day') },
          { name: 'Last 30 days', startDate: moment().subtract('day', 29).startOf('day'), endDate: moment().endOf('day') },
          { name: 'Month to Date', startDate: moment().startOf('month'), endDate: moment().endOf('day') },
          { name: 'Last month', startDate: moment().subtract('month', 1).startOf('month'), endDate: moment().subtract('month', 1).endOf('month') },
          { name: 'Last 3 months', startDate: moment().subtract('month', 3).startOf('day'), endDate: moment().endOf('day') }
  ];
  $scope.dateRange = $scope.dateRanges[1];

  $scope.$watch('dateRange', function (newValue, oldValue) {
      if (oldValue === newValue) {
          return;
      }
      $scope.dateRange = newValue;
      $scope.startDate = $scope.dateRange.startDate;
      $scope.endDate = $scope.dateRange.endDate;
  });

  $scope.$watch('startDate', function (newValue, oldValue) {
      if (oldValue === newValue)
          return;
      $scope.dateRange = $scope.dateRanges[0];
      $scope.startDate = newValue;
  });

  $scope.$watch('endDate', function (newValue, oldValue) {
      if (oldValue === newValue)
          return;
      $scope.dateRange = $scope.dateRanges[0];
      $scope.endDate = newValue;
  });
});
4

1 回答 1

1

你的观察者会导致循环依赖。您应该同时观看它们并在其中定义您的逻辑。

$scope.$watch(function() { return $scope.dateRange + ',' + $scope.startDate.getTime() + ',' + $scope.endDate.getTime(); }, function (newValue, oldValue) {
    //recover new values of all three variables from newValue.split(',')
    //if all three values satisfy the constraints defined in $scope.dateRanges, return
    //if dateRange changes, change startDate and endDate
    //if startDate or endDate changes, change dateRange
});
于 2013-08-05T14:36:18.510 回答