背景色の変更や項目の追加/削除

Level 1｜｜2016/07/21

今まで、「ng-options」「ng-repeat」「ng-click」属性を勉強してきましたが、これらと「ng-style」属性の合わせ技で、指定の箇所の背景色を変更したり、新たな背景色の追加・削除をしてみます。

サンプルコード

angularJSのng-style属性で、指定した箇所の背景色を変更してみます。また、ng-clickとng-options属性で、セレクトカラーを指定し背景色を変更したり、セレクトカラーに新たな色の追加・削除したり、現行カラーを削除したりします。

サンプルでは、「セレクトカラー」のデフォルトはブラックになっています。これをピンクやイエローに変えてみてください。クルクル回っているワンちゃんの背景色が指定の色に変わったのが分かります。
 
次に、「カラー追加/削除」では、現在セレクトカラーに入っている項目が表示されています。
例えば、pinkの「×」を押すと、表示から削除され、セレクトカラーの項目からもpinkが削除されているのを確認してください。
また、新たにカラーを追加できます。「追加」ボタンをクリックすると、入力ボックスが表示されますので、「red」と入力してみてください。すると、セレクトカラーにも「red」が追加されたことがわかります。
 
次の「選択カラーを削除」ボタンを押すと、セレクトカラーが破棄されます。と同時に、セレクトカラーの選択肢が「choose color」に変わります。

HTMLファイル

<h1>ng-style属性で背景色を変更</h1>
<div ng-style="{'background-color':myColor.name}"></div>
<p>カラー: {{ {selected_color:myColor} }}</p>

<label>■セレクトカラー:
    <select ng-model="myColor" ng-options="color.name for color in colors">
      <option value="">-- choose color --</option>
    </select>
</label>

<p>■カラー追加/削除</p>
<ul>
    <li ng-repeat="color in colors">
      <label>カラー: <input ng-model="color.name"></label>
      <button ng-click="colors.splice($index, 1)" aria-label="Remove">X</button>
    </li>
    <li>
      <button ng-click="colors.push({})">追加</button>
    </li>
  </ul>

■<button ng-click="myColor = { name:'not in list' }">選択カラーを削除</button>
 
            

JSファイル

$scope.colors = [
    {name:'pink'},
    {name:'green'},
    {name:'black'},
    {name:'yellow'},
    {name:'purple'}
];
$scope.myColor = $scope.colors[2];
 
            

1) JS側でデフォルトカラーを指定

$scope.colors = [
    {name:'pink'},
    {name:'green'},
    {name:'black'},
    {name:'yellow'},
    {name:'purple'}
];
$scope.myColor = $scope.colors[2];
            

まずは、JS側で項目となる色を設定し「colors」に入れておきます。次に、「myColor」に先に指定した色の中から、デフォルトで背景色にシチエする色を選びます。サンプルでは、2番目の「black」がデフォルトカラーです。

2）ng-style属性

<div ng-style="{'background-color':myColor.name}"></div>
            

HTMLtag ng-style="プロパティ：値">

angularJSのng-style属性では、指定したHTML要素にCSSのプロパティを指定しスタイル情報を渡します。
サンプルでは、JS側で指定したデフォルトカラー「myColor」を、ng-style属性を使って呼び出し、適用しています。
「myColor.name」となっているのは、「black」という値を呼び出すためです。つまり、「background-color:black;」という結果を返しています。

3）ng-options属性で項目を格納

<label>■セレクトカラー:
    <select ng-model="myColor" ng-options="color.name for color in colors">
      <option value="">-- choose color --</option>
    </select>
</label>
            

angularJSのng-options属性で、JS側で設定した色をセレクトボックスに表示させています。
サンプルでは、「colors」を順番に「color」で取り出し、「color.name」を出力しています。

4）ng-repeat、ng-click属性で項目の追加/削除

<p>■カラー追加/削除</p>
<ul>
    <li ng-repeat="color in colors">
      <label>カラー: <input ng-model="color.name"></label>
      <button ng-click="colors.splice($index, 1)" aria-label="Remove">X</button>
    </li>
    <li>
      <button ng-click="colors.push({})">追加</button>
    </li>
  </ul>
            

angularJSのng-repeat属性で、JS側で設定した色をセレクトボックスに表示させています。サンプルでは、「colors」を順番に「color」で取り出しています。
inputタグでモジュールを使い「color.name」を取り出し、inputタグに入れます。
 
次に削除についてですが、angularJSのng-click属性で、spliceを使えば簡単に配列から要素を削除できます。$indexでインデックス番号を取得し、1個だけ削除させています。この数字を2にすると、0番から2つ削除の意味になるので、たとえばPINKを削除した場合、一緒にGREENも削除となります。
 
「aria-label」は、「WAI-ARIA」を使っています。
「WAI-ARIA」とは、HTMLタグに「aria-」を付記することで、HTMLではできなかったこと、例えば、JSなど動的なコンテンツに、SEO対策として情報構造に意味を持たせることが可能になります。アプリなんかでは重宝するかもしれません。こちらはリファレンスとかを参考にしてください。
サンプルでは、「aria-label」を使用していますが、これはラベル表記の意味です。つまり、Remove=削除しますよって意味になります。
 
次に追加についてですが、同じくangularJSのng-click属性を使います。colors.push({})と記述していますが、colorsに値をpushするという意味になります。splice同様、angularJSではなく、JSの記述ですので、詳しくはリファレンスなどを確認してください。

6）ng-click属性で指定した値をクリア

■<button ng-click="myColor = { name:'not in list' }">選択カラーを削除</button>
            

最後に、選択した値をクリアするために「ng-click」属性で、JS側で指定していた「black」を削除させます。値に「not in list=リストにない」を指定することで、背景色を削除させています。

今回はいろんな属性を使った応用編みたいな感じになりました。JSの記述も入ってきました。JSが取っつきにくいと感じていたので、angularJSを勉強しながら並行してJSの記述方法も勉強していくと、覚えやすいかと思いました。
また「WAI-ARIA」を知らなかった方も、WEBアプリケーションなんかで使えるので、併せてみておくといいと思います。