2016-11-16 2 views
1

В моем приложении у меня есть выпадающий список для бронирования встречи с психиатром. Здесь пользователь вводит ввод в виде минут, разговаривает с врачом, поэтому в раскрывающемся меню он должен выглядеть как обычный тайминги, например, 9-10 утра, 10-11 вечера и так далее до 5 вечера, поэтому клиент может видеть доступное время для закажите встречу. Я изо всех сил пытаюсь разделить это время. Я сделал только конверсию с минут на несколько часов, после чего Im поразил время split.Hoping для некоторой помощи здесь, или любое действительное руководство для продолжения, чтобы разделить время.Время разделения между временем начала и временем окончания для заданных пользователем минут в качестве входных данных

Контроллер:

myApp.controller('ctrl', function ($scope) { 
     $scope.calc = function() { 
     var time = $scope.timeSelect; 
       if (time < 60) { 
       var a = (time) + 'm'; 
       } else if (time % 60 == 0) { 
        var a = (time - time % 60)/60 + 'h'; 
       } else { 
        var a = ((time - time % 60)/60 + 'h' + ' ' + time % 60 + 'm'); 
       } 
       $scope.result =a; 
      }   
      $scope.result=''; 
}); 
+0

Я не понимаю вашего вопроса. Вы пытаетесь выяснить, как добавить минуты к времени? – jbrown

+0

На самом деле я пытаюсь разделить время встречи. скажем, если человек хочет поговорить с психиатром в течение 45 минут, выпадающий список должен отображать тайминги, например, 9-9.45 утра, 9.45-10.30 утра .... до окончания времени 5 вечера. Таким образом, человек выберет временной интервал из раскрывающегося списка. @ jbrown – jazzoria

+0

Если вы еще этого не сделали, я бы рекомендовал использовать объект Date и связанные методы для добавления минут, а не манипулировать строкой – jbrown

ответ

3

Всякий раз, когда вы имеете дело с датами и временем, я настоятельно рекомендую использовать Momentj.js. Вот очень надуманный пример, демонстрирующий, как вы можете использовать Moment.js для установки ваших периодов времени.

angular.module("app", ["angularMoment"]) 
 
    .controller("ctrl", function($scope, moment) { 
 
    var startingTime = moment().hours(9).minutes(0); 
 
    var endingTime = moment().hours(17).minutes(0); 
 
    $scope.selectedTimeslot = ""; 
 
    $scope.intervals = [15, 30, 45, 60, 90, 120]; 
 
    $scope.interval = 60; 
 
    $scope.timeslots = []; 
 

 
    $scope.setTimeSlots = function() { 
 
     $scope.timeslots = []; 
 
     var currentStartTime = angular.copy(startingTime); // use copy to avoid reference issues since we're dealing with objects and not primitives 
 
     while (currentStartTime < endingTime) { 
 
     $scope.timeslots.push(currentStartTime.format("h:mm") + " - " + currentStartTime.add($scope.interval, "minute").format("h:mm")); 
 
     } 
 
    } 
 

 
    $scope.setTimeSlots(); 
 

 
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/1.0.0/angular-moment.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    Interval in minutes: <select ng-model="interval" ng-change="setTimeSlots()" ng-options="i for i in intervals"></select> 
 
    <br/>Timeslots: 
 
    <select ng-model="selectedTimeslot" ng-options="slot for slot in timeslots"> 
 
    <option value="">Please select</option> 
 
    </select><br/><br/> 
 
    Selected timeslot: {{selectedTimeslot}} 
 
</div>

+0

это определенная дата, потому что вы упомянуть «var startTime = moment (« 1/1/2016 9:00 AM PST »); var endTime = moment ("1/1/2016 5:00 PM PST"); ' – jazzoria

+0

Я ленился. Я обновил ответ, чтобы не использовать дату при создании объектов момента. – Lex

+0

Я попытался получить пользовательский пароль 'minutes'.Поэтому я объявил что-то вроде этого: ', но приложение поражено и также не может работать в приложении. Я делаю это неправильно. – jazzoria

0

Это может работать для вас:

function createTimeSlots(startHour, endHour, interval) { 
    if (!startHour) { 
     endHour = 8; 
    } 
    if (!endHour) { 
     endHour = 20; 
    } 
    var timeSlots = [], 
     dateTime = new Date(), 
     timeStr = ''; 
    dateTime.setHours(startHour, 0, 0, 0); 
    while (new Date(dateTime.getTime() + interval * 60000).getHours() < endHour) { 
     timeStr = dateTime.getHours() + ':' + dateTime.getMinutes(); 
     timeStr += '-'; 
     dateTime = new Date(dateTime.getTime() + interval * 60000); 
     timeStr += dateTime.getHours() + ':' + dateTime.getMinutes(); 
     timeSlots.push(timeStr); 
    } 
    return timeSlots; 
} 

console.log(createTimeSlots(9, 18, 45)); 

"9: 0-9: 45", "9: 45-10: 30", «10 : 30-11: 15 ", " 11: 15-12: 0 ", " 12: 0-12: 45 ", " 12: 45-13: 30 ", " 13: 30-14: 15 ", " 14: 15-15: 0 ", " 15: 0-15: 45 ", "15: 45-16: 30", "16: 30-17: 15"

Возможно, вы захотите добавить 0 дополнений к getHours() и getMinutes(), чтобы 1: 0 будет напечатан как 1:00.

+0

. Это должно исправить начальную нулевую проблему: ('0' + dateTime .getHours()). slice (-2) – KungWaz

0

Из вопроса я получаю приблизительное представление о том, что вам нужно, поэтому я надеюсь, что это поможет вам на вашем пути. Во-первых, я хотел бы сделать отдельную функцию для преобразования времени (в минутах от полуночи, как простой пример) в строку, как это:

function timeToString(time) { 
    if (time < 12 * 60) 
     return (time - time % 60)/60 + ":" + time % 60 + "am"; 
    else return (time - time % 60 - 12*60)/60 + ":" + time % 60 + "pm"; 
} 

Затем массив, чтобы заполнить выпадающий может быть создано так:

var times = []; 
for (t = startHour * 60; t < endHour * 60; t += duration) { 
    times[times.length] = timeToString(t) + ' - ' + timeToString(t + duration); 
} 
+0

is 'timeToString' - это встроенная функция в angulasjs. sorry Im new to angularjs – jazzoria

+0

Нет, это функция javascript, которую я определил в своем первом фрагменте, чтобы использовать его во втором. Угловая основана на javascript. Это поможет вам узнать немного javascript, например, [эту книгу] (https://www.sitepoint.com/premium/books/javascript-novice-to-ninja) – Wiebe

 Смежные вопросы

  • Нет связанных вопросов^_^