技術

Angularでセレクトボックスに色をつけたいとき

投稿日:2018年12月21日 更新日:

こんにちは。コーテッグのこやまです。

Angularでセレクトボックスが特定の値のときに色をつけたいというコードを書きました。
検索欄がいっぱい並んでいて検索したときに、どれがアクティブかわかりやすくするのに使えますね。

ngClassで特定の値のときだけクラスをつけてあげればいいですね。

テキストのとき

            
<label>タイトル</label>
<input class="form-control-sm" type="url" [(ngModel)]="title"  name="title" [ngClass]="{'search-active': title}">

セレクトボックスのとき

<select class="form-control-lg" [(ngModel)]="age" name="age" [ngClass]="{'search-active': age !== '0'}">
  <option value="0" selected="">指定なし</option>
  <option value="1">20代まで</option>
  <option value="2">30代まで</option>
  <option value="3">40代まで</option&gt;
  <option value="4">50代まで</option>
</select>

 

cssで適当に背景色を設定するとこんな感じになります。

 

 

 

-技術

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.

関連記事

docomo雑談対話APIを使って会話BOTを作りました。(LINE BOT + Heroku + Rails + docomo雑談API)

こんばんは 前回、LINE BOTを無料で試してみました。heroku + Ra …

no image

【ionic】タブをタップで最上部にスクロール!

どうも、中田です。 今日はタブをタップでトップにゴーの日です。 どういう日かとい …

no image

【Grunt】楽々デプロイ(grunt-rsync)

どうも、中田です。 gruntでアプリをデプロイするときにどうやったらいいかぁ〜 …

no image

【Rails】helperからbrタグを含めた文字列を返したい時

こんにちは プライベートではもっぱらRailsを触っています。 触ってからそんな …

no image

【ionic】リリースする!ちょっとその前に(version指定)

どうも、中田です。 ionic便利ですよね。 コマンド一つでマルチプラットフォー …