AngularJS TIPS
入力された区切り文字を配列に変換するには？（ng-list）
テキストボックスへの入力値を特定の区切り文字で分割して文字列の配列に変換するために、ng-list属性を使用する方法を解説する。
ng-list属性を利用することで、テキストボックスに入力された入力値を特定の区切り文字で分割し、配列に変換できます。例えば以下は、入力された文字列を「;」（セミコロン）で分割し、その内容を箇条書きリストとして表示する例です。
|
<!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>
|
区切り文字は、<input>要素に対してng-list="区切り文字"の形式で指定します（1）。属性値を省略して、単にng-listとした場合には、デフォルトの区切り文字としてカンマ（,）が利用されます。
1によって分割された文字列配列は、変数strs（＝ng-model属性で指定された変数）に設定されますので、あとはng-repeat属性で順に出力するだけです（2）。track by $indexという式で「配列のインデックス番号を基準にして繰り返し項目を追跡」しているのは、重複した文字列を入力された場合の備えです。ng-repeat属性の繰り返し式を単にstr in strsとし、重複した文字列を入力した場合、以下のようなエラーが発生しますので注意してください（※この場合、配列要素を基準にして繰り返し項目を追跡することになるので、要素値に重複があると、追跡できなくなりエラーになってしまいます）。ng-repeat属性の繰り返し式の詳細については、別稿「Tips：配列の内容を順に出力するには？」であらためて解説の予定です。
API：ngList（ng-list）｜ngRepeat（ng-repeat） カテゴリ：ng（コアモジュール） > directive（ディレクティブ）
※以下では、本稿の前後を合わせて5回分（第10回～第14回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
11. 要素の表示／非表示を切り替えるには？（ng-show／ng-hide／ng-open）
真偽条件に応じて要素の表示／非表示を切り替えるために、ng-show／ng-hide属性を使用する方法を解説する。また、＜details＞要素の表示／非表示を切り替えるng-open属性の使い方も紹介する。
12. 【現在、表示中】≫ 入力された区切り文字を配列に変換するには？（ng-list）
テキストボックスへの入力値を特定の区切り文字で分割して文字列の配列に変換するために、ng-list属性を使用する方法を解説する。
13. URL／メールアドレスからハイパーリンクを生成するには？（linky）
URL／メールアドレスの文字列データをアンカータグによるリンクに整形できるlinkyフィルターの基本的な使い方を説明する。
