Ich denke, wenn ich die Mitte angeklickt habe, würde ich den Timer in der Mitte mit Minuten oder Sekunden ändern, die ich will. Wie könnte ich das tun, anstatt einen 1-Minuten-Timer?Wie würde ich einen ionischen Timer erstellen, den der Client selbst ändern kann?
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;
machte ich ein kleines Beispiel für Sie, die Sie so, wie Sie wollen, umsetzen können. Im Grunde genommen sind es nur ein paar Dinge, die geändert werden müssen.
In diesem Beispiel habe ich eine einfache Eingabe gemacht, wo Sie die Zeit (in Sekunden) einstellen können. Die Eingabe kann auf der linken oberen Ecke des Kopf gefunden werden und es sieht wie folgt aus:
<input class="time" type="number" ng-model="timerTime" placeholder="Set time" ng-change="selectTimer()"/>
Die Klasse ist nur für die es ein wenig schöner aussehen und vom Hintergrund abheben, aber alles, was Sie wirklich brauchen, ist die ng-model und ng-change. Das ng-model ist das Modell, das auf dem Bereich für den Timer aktualisiert wird, um es als den Wert zu verwenden, und die ng-change Funktion ist da, um den Timer "neu zu laden", wenn das ng-model geändert wird.
In der Steuerung habe ich den Anfangswert für den Timer mit:
$scope.timerTime = 60;
Dann brauchen Sie diesen Wert auf die korrekte Funktion zuweisen:
$scope.selectTimer = function() {
$scope.timeForTimer = $scope.timerTime;
$scope.timer = $scope.timerTime;
};
Und schließlich auf der ng-change wir Rufen Sie die $scope.selectTimer, die dann den Timer selbst mit dem Wert in den Eingang eingegeben aktualisiert.
Sie könnten dann die Eingabe deaktivieren, wenn der Timer läuft/nicht zurückgesetzt wird, so dass es den Prozess nicht durcheinander bringt. Dies sollte wahrscheinlich getan werden, selbst wenn es sich um ein Pop-up handelt oder was auch immer Sie die endgültige Einstellung der Zeit implementieren werden.
Aber wie gesagt Ich bin mir nicht sicher, wie Sie das implementieren möchten, also habe ich dieses Beispiel so einfach gemacht. Bitte verwenden Sie es wie benötigt und gewünscht.
Codepen-Demo finden Sie hier: http://codepen.io/thepio/pen/PzyPxk