技術

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

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

【AWS】mysqldump&S3バックアップ。それは一瞬の出来事

こんにちは、中田です。 RDSでしっかりとバックアップ! とまでしなくていい場合 …

no image

【ionic 1.2】Native Scrolling

どうも中田です。 2015/12/10にionicの1.2が出ました! http …

no image

nginxにX-Robots-Tagを設定する

こんにちは 検索結果にページが表示されないようにするために metaタグには & …

no image

[Angular]複数のクエリパラメータを設定する

こんばんは angularで複数のクエリパラメータを設定したいと思います。 co …

esaに貼る画像をリサイズする方法

こんにちは。たなかです。 みなさん、esa使ってますか? esaは「情報を育てる …