読者です 読者をやめる 読者になる 読者になる

Develop and Design Note

フロントエンドなデザイナーの覚書

AngularJSを使ってタイムキーパーを作ってみよう #1-5【スタート・ストップの制御】

前回(AngularJSを使ってタイムキーパーを作ってみよう #1-4【カウンドダウンの実装】 - Web Design Note)までで、カウントダウンの処理が実装できたのですが、今度は「スタート」「ストップ」ボタンを連打できないようにします。

現状では、「スタート」「ストップ」ボタンともに、いつでも押せる状態なので、例えば、「カウント中はスタートボタンを押せない」ような制御を加えます。
ちなみに、今回はこちらのソースを参考にさせて頂きました。

ng−disabled属性で、特定の条件下で非活性にする

まずは、button要素を非活性にするために、ng-disabled属性を記述します。値は任意の変数ですが、「どんな時に非活性にするのか」がわかるような名前だと良さそうです。

修正前

<button ng-click="countStart()">スタート</button>
<button ng-click="countStop()">ストップ</button>

修正後

<button ng-click="countStart()" ng-disabled="countRunning">スタート</button>
<button ng-click="countStop()" ng-disabled="stopRunning">ストップ</button>

なお、button要素でなく、a要素だと上手くいかないそうです。

変数にtrueまたはfalseを代入する

続いて、script.jsの方で、先ほど作成した「countRunning」「stopRunning」の変数にtrueまたはfalseを代入します。
例えば、「$scope.countRunning = true」の時、以下のbuttonは非活性になり、押せなくなります。

<button ng-disabled="countRunning">スタート</button>

なので、trueにするかfalseにするかは、タイミングによって異なります。今回は以下のようにします。

  • デフォルト時
    • $scope.countRunning = true;//非活性
    • $scope.stopRunning = true;//非活性
  • 「スタート」を押した時(カウント中)
    • $scope.countRunning = true;//非活性
    • $scope.stopRunning = false;//活性
  • 「ストップ」を押した時
    • $scope.countRunning = false;//活性
    • $scope.stopRunning = true;//非活性

合計値が0の時は「スタート」「ストップ」ともに非活性にする

上記のままだと、デフォルトで「スタート」ボタンが非活性なので、数値が入力されたタイミングで活性にする必要があります。
また、アジェンダが「削除」されて、合計値が0になった時は、「スタート」「ストップ」ともに非活性にする必要があります。
この処理は、以下のようなJavaScriptのif分で作成します。

var sumTimeIf = function(){
  if($scope.sumTime() === 0){
    $scope.countRunning = true;
    $scope.stopRunning = true;
  }else{
    $scope.countRunning = false;
    $scope.stopRunning = true;
  }
}

このif分関数を、アジェンダの追加「$scope.addAgenda = function() {〜}」と削除「$scope.deleteAgenda = function(i){〜}」それぞれの中に入れます。

こうして、以下の処理が出来上がりました。

  • デフォルト時は「スタート」「ストップ」ボタンともに非活性
  • 数値の合計値が0になっても「スタート」「ストップ」ボタンともに非活性
  • 合計値が0以上になると「スタート」が活性
  • 「スタート」を押してカウントが始まると「スタート」が非活性、「ストップ」が活性

See the Pen azBJQM by tnk-mitsuru (@tnk-mitsuru) on CodePen.


※input要素のautofocus属性はこのブログにも効いちゃうので外してあります。
※分カウントにしたいのですが、わかりやすくするため、秒カウントにしています。

ここまでで、タイムキーパーとしての基本的な機能が備わりました。
次は、応用編として、もう少し実用的なものにアップデートしたいと思います。