vaguely

和歌山に戻りました。ふらふらと色々なものに手を出す毎日。

Angularでテキストを分割してテーブルに入れる

Angular JavaScript

ちょっと必要になったのでメモ。

やったこと

TextAreaに入力された文字列を、改行・コンマ区切りで分割してTableにセットします

Controller as

以前Angular.jsを使った時は、formなどからデータを取得する際、$scopeを使っていました。
ただ、Anglarのver.2.0では廃止になる予定とのことで、現在は「Controller As」と呼ばれる書き方が推奨されているようです。

Before

HTML

< body ng-controller='TableController' >
  < main id='input_area'>
    < textarea id='input_form' ng-model='inputModel'>
    < input id='input_button' type='button' ng-click='formatText();'>
  < /main >
～省略～

javascript

(function (){
  // Angularモジュールを作成する.
  var ctrlTableApp = angular.module('CtrlTableApp', []);
  ctrlTableApp.controller('TableController',[
    '$scope',
    function(){
      $scope.formatText = function(){
        if(!$scope.inputModel){
～省略～

After

HTML

< body ng-controller='TableController as ctrTable' >
  < main id='input_area' >
    < textarea id='input_form' ng-model='ctrTable.inputModel' >< /textarea >
    < input id='input_button' type='button' ng-click='ctrTable.formatText();' >< /input >
  < /main >
～省略～

javascript

(function (){
  // Angularモジュールを作成する.
  var ctrlTableApp = angular.module('CtrlTableApp', []);
  ctrlTableApp.controller('TableController',[
    function(){
      this.formatText = function(){
        if(!this.inputModel){
～省略～

javascriptでcontrollerを設定する引数など細かい部分には違いがありますが、そんなには混乱せずに置き換えられそうです。

コード

main.html

< !DOCTYPE html >
< html lang='ja' ng-app='CtrlTableApp' >
< head >
  < meta charset='utf-8' >
  < title >ViewTable< /title >
< /head >
< body ng-controller='TableController as ctrTable' >
  < main id='input_area' >
    < textarea id='input_form' ng-model='ctrTable.inputModel' >< /textarea >
    < input id='input_button' type='button' ng-click='ctrTable.formatText();' >< /input >
  < /main >
  < main id='output_area' >
    < table id='output_table' >
      < tbody >
        < tr ng-repeat='output in ctrTable.aryOutput' >
          < td >{{output.strText1}}
          {{output.strText2}}< /td >
          < td >{{output.strText3}}< /td >
        < /tr >
      < /tbody >
    < /table >
  < /main >
  < script src='./js/angular.min.js' >< /script >
  < script src='./js/javascript.js' >< /script >
< /body >
< /html >

javascript.js

(function (){
  // Angularモジュールを作成する.
  var ctrlTableApp = angular.module('CtrlTableApp', []);
  // コントローラの作成.今回は引数なし.
  ctrlTableApp.controller('TableController',[
    function(){
      this.formatText = function(){
        if(!this.inputModel){
          return;
        }
        // 行ごとに分割.
        var strTextPerLines = this.inputModel.split('\n');

        this.aryOutput = [];
        for(var i = 0; i < strTextPerLines.length; i++){
          // コンマごとに分割.
          var strTextPerComma = strTextPerLines[i].split(',');
          if(strTextPerComma.length < 3){
            // 分割後の要素数が3未満なら次の行へ.
            continue;
          }
          this.aryOutput.push({
              strText1: strTextPerComma[0],
              strText2:strTextPerComma[1],
              strText3: strTextPerComma[2]});
        }
      };
    }
  ]);
}).call(this);

今回は分割後の配列を0番目から2番目まで使用していて、連想配列に入れたものをngrepeatを使ってtableに突っ込んでいます。
HTMLの各要素にはCSSを使うことを想定してIDを割り振っていますが、今回特にCSSは使っていませんw

参考

終わりに

ngrepeatに渡す値(ctrTable.aryOutput)の部分で少しつまづきましたが、さくっと欲しい機能が作成できるのは便利ですね。
Angular.jsのver.2.0にも採用されるという、TypeScriptにも触れてみたいところ。