技術

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

関連記事

Siriに笑って欲しいから [iOS 11、macOS High Sierra](「Siri」の笑い声まとめ)

iPhone Xが発売されて巷はiPhone Xの記事ばかり。 なんとなく見てい …

no image

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

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

no image

【Angular】Full calendarで横スクロールを実装

こんにちは Full Calendarにはいくつかの表示モードがあります。 こち …

no image

【Rails】kaminariさんって配列もいけるんですね

どうも中田です。 久しぶりのブログになります。 railsでページングをする場合 …

[AWS Cli] brew install awscli が失敗!

どうも中田です awsコマンドがないよーって言われたので、再度インストールするこ …