Yelp Review Stars, SCSS and AngularJS

Yelp Stars SCSS AngularJS

// Courtesy: http://hugogiraudel.com/2014/02/24/star-rating-system-with-sass/
// Great technique integrated with AngularJS which is pulling in Yelp's JSON data
// See it in action here: http://www.beertrail.vermontbrewers.com/#/

<section class="local-list">
    <a ng-href="#/{{member.selector}}/dininglist/{{dining.id}}" class="local-list-item"  ng-repeat="dining in diningList | orderBy:  '+name' ">
        <img class="local-list-image" ng-src="{{dining.photo_url}}" />
        <div class="local-list-vitals">
            <p>{{dining.name}}</p>
            <p>{{dining.address1}}</p>
            <p>{{dining.city}}, {{dining.state}}, {{dining.zip}}</p>
            
            //here's the magic!!
            <p class="rating" data-rating="{{dining.avg_rating}}">
                <i class="star-1">★</i>
                <i class="star-2">★</i>
                <i class="star-3">★</i>
                <i class="star-4">★</i>
                <i class="star-5">★</i>
                <span>   -from {{dining.review_count}} Reviews(s)</span>
            </p>
        </div>
    </a>
</section>