技術

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

【Rails】そろそろデバッグしましょうか

どうも中田です。 今までrailsの開発はIDEを使わずテキストエディタだけでや …

no image

[wordpress]contact form7で作ったformをコード内で呼び出す

こんばんは wordpressでformを作る時はcontact form7を使 …

no image

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

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

no image

CSSのpositionで要素を真ん中寄せにする(JS不要)

positionを使って要素を真ん中寄せにする時は、transform: tra …

[Bitbucket] fatal: Could not read from remote repository.

どうも中田です こないだリモートリポジトリにPushできないんすけど〜という話を …