技術

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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

画像生成マシーン「MakeGirlsMoe」の10連結果

女の子の萌え画像を作ってくれる「MakeGirlsMoe」なるものが作られたよう …

no image

[TypeScript]enumを代入記法で書いた場合に、値からキーが取れるか調べてみた。

TypeScriptのenumのドキュメント(TypeScript Deep D …

no image

wordpressで固定ページが表示されない時は.htaccessを確認しよう

こんばんは 個人でwordpressサイトを持っているのですが いきなり固定ペー …

Dockerでwheneverが動かない (bundler: failed to load command: bin/rails (bin/rails))

どうも中田です。 久々の投稿になります。 正確にはwheneverで登録したcr …

no image

[Angular]リアクティブフォームでのセレクトボックスの扱い方。

Angularはまだ本が少ないので、リアクティブフォームの説明は基本的なところも …