Question

我正在营业时间，用户可以选择一天并选择其营业时间或选择“关闭”无线电btn并将fromTime和toTime设置为关闭。如果他选择“适用于所有工作日”，他在周一或任何一天选择的任何时间都将适用于所有工作日。默认情况下，工作日的设置时间为上午7:00至下午3:00，周六，周日为关闭。这些值需要在

中发布到服务器

[{
  Day:  string,
  fromTime: string, 
  toTime: string
}]

这些操作未按预期运行。我试图在fiddle模拟。但无法让它在那里工作。屏幕截图是从我的实时项目中捕获的。单选按钮用于显示值。

<div class="controls">
  <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 col-xl-9">
    <div ng-repeat="list in vm.weekdays" ng-init="thisIndex = $index">
      <div class="control-group" id="from-to">
        <div class="controls">

          <div class="col-xs-6 col-sm-12 col-md-2 col-lg-2 col-xl-2 radio-days">
            <label class="radio inline aid-radio-days-lbl radio-days" for="aid-radio-{{list.Day}}">
              {{list.Day}}
              <input type="radio" class="radio-days" name="{{list.Day}}" id="aid-radio-{{list.Day}}" value="{{list.name}} ng-model="vm.closed[thisIndex]">
            </label>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 select-time">
            <time-picker ng-model="vm.weekdays.fromTime" id="aid-from-{{$index}}" name="fromTime"></time-picker>
            <span>&nbsp;To &nbsp;</span>
            <time-picker ng-model="vm.weekdays.toTime" id="aid-to-{{$index}}" name="to"></time-picker>
          </div>
          <div class="hidden-xs col-sm-12 col-md-1 col-lg-1 col-xl-1 radio-closed">
            <label class="radio inline aid-radio-days-lbl" for="aid-radio-closed-{{list.Day}}">
              <input type="radio" name="{{list.Day}}" id="aid-radio-closed-{{list.Day}}" ng-model="vm.closed[thisIndex]" ng-change="vm.setClosed($index)"> Closed
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="hidden-xs col-sm-3 col-md-3 col-lg-3 col-xl-3 all-week-chkbox">
    <label class="checkbox inline aid-radio-days-closed-lbl">
      <input type="checkbox" id="inlineCheckbox1" value="option1" ng-model="vm.closed" ng-change="vm.setAllWeekdayClosed($index)"> Apply to all weekdays
    </label>
  </div>
</div>

控制器：

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

  function HoursController () {
    var vm = this;
    vm.setClosed = setClosed;
    vm.setAllWeekdayClosed = setAllWeekdayClosed;
    vm.weekdays = [
                    {Day: 'Monday', fromTime: "7:00 am", toTime: "3:00 pm"},
                    {Day: 'Tuesday',fromTime: "7:00 am", toTime: "3:00 pm"},
                    {Day: 'Wednesday',fromTime: "7:00 am", toTime: "3:00 pm"},
                    {Day: 'Thursday',fromTime: "7:00 am", toTime: "3:00 pm"},
                    {Day: 'Friday',fromTime: "7:00 am", toTime: "3:00 pm"},
                    {Day: 'Saturday', fromTime: "closed", toTime: "closed"},
                    {Day: 'Sunday', fromTime: "closed", toTime: "closed"}
                ];

    function setClosed(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 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 = {
            template: '<select class="input-small" ng-options="time as time for time in timings"></select>',
            restrict: 'E',
            require: 'ngModel',
            replace: true,
            compile: compileFn
        };
        return 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 = ['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'
            ];
        };
    }
})();

AngularJS单选按钮和复选框不绑定到模型

0 个答案: