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

Develop and Design Note

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

AngularJSを使ってタイムキーパーを作ってみよう #1-3【入力値の合計】

AngularJS HTML5

前回(AngularJSを使ってタイムキーパーを作ってみよう #1-2【フォーム送信処理の実装】 - Web Design Note)の続きで、以下の挙動を作ります。

  1. 入力できる値を数字のみにする
  2. 入力された値の合計値を出力する
  3. アジェンダを個別に削除できるようにする

入力できる値を数字のみにする

前回までのコードだと、全角や半角英字などもフォームに入力・送信ができてしまい、入力値の足し算が上手くできません。そこで、入力できるテキストを「半角数字」に限定します。

inputタグの入力値を半角英数字などに制限する場合、JavaScriptを使う方法がありますが、今回は、HTML5で追加された新しい属性を使って対応します。

type属性値 number type="number"を記述すると、入力した値が文字ではなく、数値として処理されます。また、以下のpattern属性を有効にできます。
pattern属性 値には正規表現を入れます。その正規表現に該当しないテキストが入力されて処理が走ると、警告が出ます。ブラウザによりUIが異なるようです。
autofocus属性 この属性を記述すると、ページを開いた瞬間に、そのフォームにフォーカスがあたった状態になります。

これらの属性を使って、inputタグを修正し、送信される入力値を「数値」に制限します。

修正前

<input ng-model="settingTime" type="text">分の議題を<input type="submit" value="追加">

修正後

<input ng-model="settingTime" type="number" pattern="[0-9]*" placeholder="20" autofocus>分の議題を<input type="submit" value="追加">

これによって、submitで送信される値は、半角数字のみになります。

入力された値の合計値を出力する

次に、「追加」されていく「半角数字」を合計して出力する仕組みを作るのですが、ここもToDoアプリのコードを参考にしました。

ここで紹介されている「angular.forEach」の記述とほぼ同じものををコントローラー(script.js)に追記し、HTMLには、{{sumTime}}を追記します。

script.jsに追記する記述

$scope.sumTime = function(){
  var sum = 0;
  angular.forEach($scope.agendas, function(agenda){
    sum += agenda.time;
  });
  return sum;
 }

index.htmlに追記する記述

<p>会議時間 {{sumTime()}} 分</p>

アジェンダを個別に削除できるようにする

続いて、追加していった各アジェンダを個別に削除して、それを合計値に反映するようにします。とは言っても、けっこう簡単。

こちらの記事を参考にしまして、まず、index.htmlに削除用のディレクティブを記述し、

<a ng-click="deleteAgenda($index)" href>削除</a>

script.jsに、その関数を記述します。

$scope.deleteAgenda = function(i){
  $scope.agendas.splice(i,1);
}

こうして、以下の挙動が完成。

  1. フォームに「半角数字」を入力する
  2. 「追加」ボタンを押す
  3. 入力された「半角数字」がhtmlと共に出力される
  4. 次々に入力された「半角数字」は、合計値として出力される

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


※input要素のautofocus属性はこのブログにも効いちゃうので外してあります。

次に、合計値でカウントする仕組みを作ります→AngularJSを使ってタイムキーパーを作ってみよう #1-4【カウンドダウンの実装】 - Web Design Note