Как я могу сделать ионный таймер, который клиент может изменить?

Question

Я думаю, если бы я щелкнул по центру, я бы изменил таймер посередине любыми минутами или секундами, которые я хочу. Как я могу это сделать, а не жестко запрограммированный таймер за 1 минуту?

http://codepen.io/comapedrosa/pen/ONYgzJ

// When you press a timer button this function is called 
$scope.selectTimer = function() { 
    $scope.timeForTimer = 60; 
    $scope.timer = 60; 

Answer 1

Я сделал небольшой пример для вас, которые вы можете реализовать так, как вы хотите. В принципе, это всего лишь несколько вещей, которые нужно было изменить/использовать.

В этом примере я сделал простой ввод, где вы могли установить время (в секундах). Вход может быть найден в верхнем левом углу заголовка, и это выглядит следующим образом:

<input class="time" type="number" ng-model="timerTime" placeholder="Set time" ng-change="selectTimer()"/> 

класс только за то, что выглядят немного лучше и выделиться из фона, но все, что вам действительно нужно, это ng-model и ng-change. Модель ng-model - это модель, которая обновляется в области использования таймера для использования в качестве значения, а функция ng-change предназначена для «перезагрузки» таймера при изменении ng-model.

В контроллере я установить начальное значение для таймера с:

$scope.timerTime = 60; 

Затем вам нужно присвоить это значение для правильной работы на:

$scope.selectTimer = function() { 
    $scope.timeForTimer = $scope.timerTime; 
    $scope.timer = $scope.timerTime; 
}; 

И, наконец, на ng-change мы вызывают $scope.selectTimer, который затем обновляет сам таймер со значением, вставленным во вход.

Затем вы можете отключить вход, когда таймер работает/не сбрасывается, чтобы он не испортил процесс. Это, вероятно, должно быть сделано, даже если это всплывающее окно или что бы вы ни выбрали для окончательной настройки времени.

Но, как я уже сказал, я не уверен, как вы хотели бы реализовать это, поэтому я сделал этот пример простым. Пожалуйста, используйте его по мере необходимости и захотите.

Демо-версия Codepen находится здесь: http://codepen.io/thepio/pen/PzyPxk