このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2014.12.23

AngularJS + TypeScript で スターアイコン作成

いやぁ、Angularは便利だ。

ということで、AngularJS でスターアイコンを作成しましょう。

スターアイコンはよくあるこんな感じのやつですね。

Amazonのレビュー評価などにもありますよね。

今回はこれをtypescriptとAngularJSで作成します。

点灯している状態、半分点灯している状態、消灯している状態とそれぞれのデザインを用意し、

CSSのClassを半分点灯している状態を「half」、消灯している状態を「off」とでもしときます。

htmlの方はこんな感じで回して、

jsonで数字を渡して表示させたいと思います。

個別に値を渡して表示させるのはもちろんですが、実際使うとなったらそれぞれの星の数を取得して

平均値を出して表示させたいですよね。

ということで、jsonはこのような感じに。

star_numを取得した時はその数の表示、star_ allを取得した時は合計の平均値を求めて表示。

メインのクラスはこちら。

ある程度コメントを書いてますので詳細は割愛させていただきます ><

scopeを設定。

htmlの方でng-repeatで表示。

といった感じで作成してみました。

実際、評価スターの表示など行ったりしないかと思いますので、

次回はもっと使用頻度が高いところをまとめられたらと思います。

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。