Corredor

ウェブ、プログラミングの勉強メモ。

テキストに行番号や接頭辞・接尾辞を挿入する Angular アプリを作った

テキストエディタによっては「矩形選択」が出来たりするが、連番の挿入が柔軟にできるエディタが少ない気がしたのと、「そういうエディタねえよ」っていう環境もあると思うので、Angular アプリとして作ってみた。

行番号は整形せず入れたり、0 パディングして入れたり、右寄せで入れたりできる。

8 コレが通常の行番号挿入
9 こういう感じ
10 こういう感じ

08 コレが 0 パディングのイメージ
09 こういう感じ
10 こういう感じ

 8 コレが右寄せのイメージ
 9 こういう感じ
10 こういう感じ

行番号とは別に、全ての行の最初と最後に、固定文言を入れられるオプションも用意した。行番号を「出力しない」にしておけば、テキストの各行の接頭辞と接尾辞を一括付与するだけのツールとしても使える。

値の変更は ngDoCheck() で監視して、自動的に結果を出力するようにしているのだが、一つつまづいたのはラジオボタンの実装。

今回の画面でいうと、2つの別々の項目に、3個ずつラジオボタンが置いてあるので、2項目を区別しないといけない。

<input type="radio" [(ngModel)]="options.lineNumberStyle" value="none"> 整形なし
<input type="radio" [(ngModel)]="options.lineNumberStyle" value="zeroPadding"> 0 パディング
<input type="radio" [(ngModel)]="options.lineNumberStyle" value="alignRight"> 右寄せ

<!-- ↑ と ↓ は別々の項目 -->

<input type="radio" [(ngModel)]="options.lineNumberPosition" value="beforeSrc"> 入力値の前
<input type="radio" [(ngModel)]="options.lineNumberPosition" value="afterSrc"> 入力値の後
<input type="radio" [(ngModel)]="options.lineNumberPosition" value="none"> 出力しない

しかし、上述のように実装したところ、2項目の値が共有されてしまうというおかしな挙動になっていた。ngDoCheck() を使わなければ、それぞれの [(ngModel)] の値は別々に保持されるのに、妙な動きだった。

コレを解消するには、name 属性値を別々に付与してやると良い。

<input type="radio" [(ngModel)]="options.lineNumberStyle" name="optionsLineNumberStyle" value="none"> 整形なし
<input type="radio" [(ngModel)]="options.lineNumberStyle" name="optionsLineNumberStyle" value="zeroPadding"> 0 パディング
<input type="radio" [(ngModel)]="options.lineNumberStyle" name="optionsLineNumberStyle" value="alignRight"> 右寄せ

<!-- TypeScript 側では一切参照しないが、name 属性を別々に付与すると、[(ngModel)] の区別が付くようになる -->

<input type="radio" [(ngModel)]="options.lineNumberPosition" name="optionsLineNumberPosition" value="beforeSrc"> 入力値の前
<input type="radio" [(ngModel)]="options.lineNumberPosition" name="optionsLineNumberPosition" value="afterSrc"> 入力値の後
<input type="radio" [(ngModel)]="options.lineNumberPosition" name="optionsLineNumberPosition" value="none"> 出力しない

コレで上手く行った。

こうしたテキスト処理系のアプリは、個々の機能は比較的簡単に作れる上に、それなりに繰り返し使う用途が出てくるので、手元に置いておくのは便利かも。

Angular Webアプリ開発 スタートブック

Angular Webアプリ開発 スタートブック