Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
AngularJS TIPS

AngularJS TIPS

入力された区切り文字を配列に変換するには?(ng-list)

2015年6月8日

テキストボックスへの入力値を特定の区切り文字で分割して文字列の配列に変換するために、ng-list属性を使用する方法を解説する。

  • このエントリーをはてなブックマークに追加

 ng-list属性を利用することで、テキストボックスに入力された入力値を特定の区切り文字で分割し、配列に変換できます。例えば以下は、入力された文字列を「;」(セミコロン)で分割し、その内容を箇条書きリストとして表示する例です。

HTML
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body>
<form>
  <label for="delim">区切り文字列:</label>
  <!--1文字列をセミコロンで分割-->
  <input id="delim" name="delim" type="text" ng-model="strs" ng-list=";" />
  <hr />
  <div>入力された文字列は、以下の通りです。</div>
  <!--2分割された文字列をリスト表示-->
  <ul>
    <li ng-repeat="str in strs track by $index">{{str}}</li>
  </ul>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</body>
</html>
入力値をセミコロンで分割するためのコード(list.html)
分割された文字列をリストとして表示
分割された文字列をリストとして表示

 区切り文字は、<input>要素に対してng-list="区切り文字"の形式で指定します(1)。属性値を省略して、単にng-listとした場合には、デフォルトの区切り文字としてカンマ(,)が利用されます。

 1によって分割された文字列配列は、変数strs(=ng-model属性で指定された変数)に設定されますので、あとはng-repeat属性で順に出力するだけです(2)。track by $indexという式で「配列のインデックス番号を基準にして繰り返し項目を追跡」しているのは、重複した文字列を入力された場合の備えです。ng-repeat属性の繰り返し式を単にstr in strsとし、重複した文字列を入力した場合、以下のようなエラーが発生しますので注意してください(この場合、配列要素を基準にして繰り返し項目を追跡することになるので、要素値に重複があると、追跡できなくなりエラーになってしまいます)。ng-repeat属性の繰り返し式の詳細については、別稿「Tips:配列の内容を順に出力するには?」であらためて解説の予定です。

文字列が重複した場合に発生するエラー(開発者ツール)
処理対象:ディレクティブ(Directive) カテゴリ:基本
API:ngList(ng-list)|ngRepeat(ng-repeat) カテゴリ:ng(コアモジュール) > directive(ディレクティブ)

※以下では、本稿の前後を合わせて5回分(第10回~第14回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

AngularJS TIPS
10. 条件式の真偽に応じて表示を切り替えるには?(ng-if)

真偽条件に応じて要素の表示/非表示を切り替えるために、ng-if属性を使用する方法を解説する。

AngularJS TIPS
11. 要素の表示/非表示を切り替えるには?(ng-show/ng-hide/ng-open)

真偽条件に応じて要素の表示/非表示を切り替えるために、ng-show/ng-hide属性を使用する方法を解説する。また、<details>要素の表示/非表示を切り替えるng-open属性の使い方も紹介する。

AngularJS TIPS
12. 【現在、表示中】≫ 入力された区切り文字を配列に変換するには?(ng-list)

テキストボックスへの入力値を特定の区切り文字で分割して文字列の配列に変換するために、ng-list属性を使用する方法を解説する。

AngularJS TIPS
13. URL/メールアドレスからハイパーリンクを生成するには?(linky)

URL/メールアドレスの文字列データをアンカータグによるリンクに整形できるlinkyフィルターの基本的な使い方を説明する。

AngularJS TIPS
14. 入力フォームに検証機能を実装するには?(form/input)

標準的な<input>要素を拡張して入力フォームに検証機能を付ける方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!