StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
20537804
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-12-12T07:47:06.773
FavoriteCount
0
LastActivityDate
2013-12-12T07:55:07.833
LastEditDate
2013-12-12T07:55:07.833
LastEditorUserId
1631379
OwnerUserId
1547033
ParentId
20536987
PostTypeId
2
Score
2
ViewCount
0
LastEditorDisplayName
text
Body
despite your question is qualified as just an AngularJs question I have a other suggestion to approach your desired effect with algo Angular Js but a little bit of Css trick. First I would get two 5 star images one 'Empty' or gray and one 'Full' or yellow like so: <img src="https://i.stack.imgur.com/sGnY4.jpg" alt="Empty stars"> Then I would create a div with the gray stars and a overlay div with the bright yellow ones. Both using <code>background-image</code> instead of regular <code><img></code> tags, doing this I would be able to change the width of the overlay div to achieve the amount of rating necessary. Check out this <a href="http://jsfiddle.net/Xes4v/1/" rel="nofollow noreferrer">quick fiddle</a> (I apologize for the poor images, it was what I could get from google images for a quick demo - play around with the width in the full-star div to see) First I would organize the Html as the following: <pre><code><div class="star-rating">  <div class="full-star" style="width: {{Item.ItemDetails.Rating * 20 || 0}}%"></div> <div class="empty-star"> </div> </div> </code></pre> The width on the full-star will determine how much of the star would appear. With the following Css: <pre><code>/* This is just an example instead of using <img> tags you can use background-image and achive half-star results */ .star-rating { position: relative; /* other styles to match preference */ } .full-star { position: absolute; z-index: 1; height: 100%; background-image: url('PATH_TO ~/Images/star.png'); /* other styles to match preference */ } .empty-star { width: 100%; height: 100%; background-image: url('PATH_TO ~/Images/star_gray.png'); /* other styles to match preference */ } </code></pre> Cheers.
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POAngular 5 star rating bar
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USMaxim Shoustin
UserOwnerUserId
1. USLucas Lazaro
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.