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

Archives Details

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

JavaScript

2014.12.23

この記事は最終更新日から1年以上が経過しています。

いやぁ、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]

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

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

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

Comment

Related Article

2022 VIVA JS World Cup 開幕!! 〜 Vue3で作るサッカーゲーム 〜

2022.12.24

OAuthのフローを可視化できるツールを作ってみました。

2020.05.17

令和の時代に、JavaScriptで Shift-JISファイル作成 全銀データフォーマットに対応する。

2020.03.03

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

2020.01.31

年末のレトロゲーム熱の際、ファミコンソフト一覧パッケージ作ってました。

2020.01.24

あと10日で「jsdo.it」のサービスが終わってしまう!! ソースダウンロードまだの方は急げぇ〜!

2019.10.21

正規表現 先読み後読み 論理積

2019.07.28

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

2019.06.22

SPAサイトでの認証認可 JWT✗Rails5✗Nuxt.js

2019.03.24

CATEGORY LIST

LATEST NEWS

AI(ChatGPT)に聞くDart言語

Dart

2023.03.12

DartパッケージでPub Pointsを満点にする

Dart

2023.03.11

Dartパッケージをサクッと作成する

Dart

2023.03.07

DartでさくっとCLIツール作成。

Dart

2023.02.28

M1Macで行う「RUSTではじめるOpenGL」

Rust

2023.02.25

SolidityとEthereumによる実践スマートコントラクト開発 書評 ~ 再構築

暗号通貨、ブロックチェーン

2023.02.10

【Unity x WebAssembly】UnityコンテンツをBlazorとFlutterでWebアプリとして扱う

Unity

2023.01.30

【nasne】M1 Mac Miniで、「torne® mobile」使用して、テレビ視聴。

mac

2022.12.31

2022 VIVA JS World Cup 開幕!! 〜 Vue3で作るサッカーゲーム 〜

JavaScript

2022.12.24

M1 Mac ruby rbenv install error

Ruby

2022.10.10

【Flutter】CheckboxListTileのチェックボックスをカスタマイズ

Flutter

2022.10.01

FLEXISPOT E3で作るスタンディング PCデスク

イベント

2022.09.18

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US