angularjs – 如何根据选定的开始时间填充timepicker下拉列表中

发布时间：2020-12-17 07:11:11 所属栏目：安全来源：网络整理

导读：我正在努力为企业设定营业时间.结束时间应为开始时间后1小时,结束时间下拉列表不应显示开始时间/之前的值. 这是我的 fiddle (function() { 'use strict'; angular.module('agencyApp',[]) .controller('HoursController',HoursController) .directive('timeP

我正在努力为企业设定营业时间.结束时间应为开始时间后1小时,结束时间下拉列表不应显示开始时间/之前的值.
这是我的 fiddle

(function() {
  'use strict';
  angular.module('agencyApp',[])
    .controller('HoursController',HoursController)
    .directive('timePicker',timePicker);

  function HoursController() {
var vm = this;

vm.print = function() {
  console.log(vm);
};
vm.setClosed = setClosed;
vm.setAllWeekdayClosed = setAllWeekdayClosed;
vm.weekdays = [{
  Day: 'Monday',fromTime: "Select",toTime: "Select"
},{
  Day: 'Tuesday',{
  Day: 'Wednesday',{
  Day: 'Thursday',{
  Day: 'Friday',{
  Day: 'Saturday',fromTime: "closed",toTime: "closed"
},{
  Day: 'Sunday',toTime: "closed"
}];

vm.closed = [
  false,false,true,true
];

function setClosed(index) {
  if (vm.closed[index]) {
    vm.weekdays[index].toTime = vm.weekdays[index].fromTime = 'closed';
  }
  if (!vm.closed[index]) {
    vm.weekdays[index].fromTime = 'Select';
    vm.weekdays[index].toTime = 'Select';
  }
};

function setAllWeekdayClosed(index) {
  if (vm.closed[index]) {
    vm.weekdays[index].toTime = vm.weekdays[index].fromTime = 'closed';
  }
  if (!vm.closed[index]) {
    vm.weekdays[index].fromTime = '7:00 am';
    vm.weekdays[index].toTime = '3:00 pm';
  }
};

}

function timePicker(){
????var ddo = {
??????模板：”,
??????限制：’E’,
??????require：’ngModel’,
??????替换：true,
??????compile：compileFn
????};
????返回ddo;

function compileFn(tElement,tAttrs) {
  tElement.attr('ng-model',tAttrs.ngModel);
  //tElement.attr('ng-disabled',tAttrs.ngModel + ' === "closed"');
  return linkFn;
};

function linkFn(scope,element,attrs) {
  scope.timings = ['Select','12:15 am','12:30 am','12:45 am','1:00 am','1:15 am','1:30 am','1:45 am','2:00 am','2:15 am','2:30 am','2:45 am','3:00 am','3:15 am','3:30 am','3:45 am','4:00 am','4:15 am','4:30 am','4:45 am','5:00 am','5:15 am','5:30 am','5:45 am','6:00 am','6:15 am','6:30 am','6:45 am','7:00 am','7:15 am','7:30 am','7:45 am','8:00 am','8:15 am','8:30 am','8:45 am','9:00 am','9:15 am','9:30 am','9:45 am','10:00 am','10:15 am','10:30 am','10:45 am','11:00 am','11:15 am','11:30 am','11:45 am','12:00 pm','12:15 pm','12:30 pm','12:45 pm','1:00 pm','1:15 pm','1:30 pm','1:45 pm','2:00 pm','2:15 pm','2:30 pm','2:45 pm','3:00 pm','3:15 pm','3:30 pm','3:45 pm','4:00 pm','4:15 pm','4:30 pm','4:45 pm','5:00 pm','5:15 pm','5:30 pm','5:45 pm','6:00 pm','6:16 pm','6:30 pm','6:45 pm','7:00 pm','7:15 pm','7:30 pm','7:45 pm','closed'
  ];
};
  }
})();

解决方法

您必须编写自定义过滤器以过滤选定开始时间之前的时间选项.

我已经为你做了.请参考jsFiddle

angular.module('agencyApp',[])
  .controller('HoursController',HoursController)
  .directive('timePicker',timePicker)
  .filter('timeFilter',function () {
    return function (input,filterCriteria) {
      if (filterCriteria && filterCriteria !== "Select") {
        input = input || [];
        if (filterCriteria === 'closed') {
          return ['closed'];
        }
        var out = [];
        input.forEach(function (time) {
          if (moment(time,'h:mm a').isAfter(moment(filterCriteria,'h:mm a'))) {
            out.push(time);
          }
        });
        return out;
      } else {
        return input;
      }
    };
  })

我添加了momentjs进行时间比较.

指令模板将如下所示.

<select class="input-small" ng-options="time as time for time in timings | timeFilter:min"></select>

现在指令将使用min属性进行过滤.

scope:{
 min: '='
}

用法

<time-picker ng-model="vm.weekdays[$index].toTime" id="aid-to-{{$index}}" name="to" min="vm.weekdays[$index].fromTime"></time-picker>

请参阅接受fromTime的min属性

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!