Angular jsを使ってストップウォッチを作る
ユーザ側に経過時間を見せながらログを取るアプリケーションを作る必要があったので，ここにメモ
表示用のhtml
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<!-- import Library | Framework -->
<title>ストップウォッチ</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
<script src="./Time_control.js"></script>
</head>
<body>
<div ng-contoller="time_controller">
<!-- 表示用 -->
<p>{{time_status}}</p>
<div>
<input type="button" value="start" ng-click="start()" ng-class="{disabled :start_status}">
</div>
<div>
<input type="button" value="end" ng-click="stop()" ng-class="{disabled :stop_status}">
</div>
</div>
</body>
ng-controllerでコントロールの範囲を決めて，その中のng-clickに対してイベントリスナーをJS側で書いていく
Time_control.js
var app = angular.module("app",[]);
app.controller("time_control",function($scope,$interval){
$scope.time_status = "00:00";
// 外のメソッドからアクセスしたいため，グローバル変数へ
time = 0;
// startのボタンのみ有効
$scope.start_status = "";
$scope.stop_status = "disable";
// スタートを押した際にカウントを始める
$scope.start = function(){
// スタートボタンは無効化する
$scope.start_status = "disabled";
$scope.stop_status = "";
// 1秒間に1回処理を呼び出すようにする
timer = $interval(function(){
time++;
var sec = parseInt((time % 60) / 10) == 0 ? "0" + (time % 60).toString() : (time % 60).toString();
var min = parseInt(time / 600) == 0 ? "0" + parseInt(time/60).toString() : parseInt(time/60).toString();
$scope.time_status = min + ":" + sec;
},1000);
}
// ストップを押したら時間を止めるようにする
$scope.stop = function(){
$interval.cancel(timer);
$scope.start_status = "";
$scope.stop_status = "disabled";
};
})
コードはこんな感じ
注意するところはcontollerの中の引数を$scopeだけではなく$intervalも入れること
割とそのエラーで今後ハマりそう。。