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

いやぁ、Angularは便利だ。

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

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

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

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

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

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

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

[gist id=85c001d0176cef648a76]

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

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

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

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

[gist id=4deb94181bef51d80baf]

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

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

[gist id=379fa8701bbc7144c6b1]

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

scopeを設定。

[gist id=3e04aff5327648d9ad8d]

htmlの方でng-repeatで表示。

[gist id=85c001d0176cef648a76]

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

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

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