Adding Star Ratings to Elements
In this example you will use just the AngularJS scope, controller, and view to implement elements that implement the star ratings for images. When you click on a star, the rating changes in the scope and the number of stars changes.
The purpose of this exercise is just to remind you that much of the data binding and view interactions can be accomplished in basic AngularJS templates without the need for custom directives.
The folder structure for this example is as follows:
■ ./server.js: Node.js web server that serves the static project files.
■ ./images: Folder that contains the images used in the examples.
■ ./ch11: Project folder.
■ ./ch11/rating.html: AngularJS template for the project that implements a simple star rating to elements.
■ ./ch11/js/rating.js: AngularJS application that defines the supporting star rating elements.
The code in Listing 11.14 implements the rating.js AngularJS application. Notice that the data used comes from $scope.items. This data could have come from a service, a database or another source. The array $scope.stars is used in the template to display the stars on the web page. The only function required in the controller code is adjustRating, which is called when the user changes the rating by clicking on a star.
Listing 11.14 rating.js: AngularJS Application That Provides the Data and Functionality to Support Star Ratings in the View
01 angular.module('myApp', [])
02 .controller('myController', ['$scope', function($scope) {
03 $scope.stars = [1,2,3,4,5];
04 $scope.items = [
05 {
06 description: "Delicate Arch",
07 img: "/images/arch.jpg",
08 rating: 3},
09 {
10 description: "Silver Lake",
11 img: "/images/lake.jpg",
12 rating: 4},
13 {
14 description: "Yellowstone Bison",
15 img: "/images/bison.jpg",
16 rating: 4}
17 ];
18 $scope.adjustRating = function(item, value){
19 item.rating = value;
20 };
21 }]);
The code in Listing 11.15 implements an AngularJS template that iterates through the items array from the scope and builds out the image elements complete with the description and star rating. Note that to build the star list, ng-repeat is used on the stars array from the scope. Also note in Line 31 that to set whether a star or an empty star is displayed, the ng-class attribute is set based on the item rating being greater than the star index. The ng-click attribute is used to bind mouse clicks on each star to the adjustRating() function in the scope to set the rating for this item.
The resulting web page is shown in Figure 11.5. Notice that as the stars are clicked, the rating and stars displayed also change.
Listing 11.15 rating.html: AngularJS Template That Utilizes Data from the Scope to Display a List of Images with Descriptions and Ratings
01 <!DOCTYPE html>
02 <html ng-app="myApp">
03 <head>
04 <title>Ratings</title>
05 <style>
06 img {
07 width: 100px; }
08 .star {
09 display: inline-block;
10 width: 15px;
11 background-image: url("/images/star.png");
12 background-repeat: no-repeat;
13 }
14 .empty {
15 display: inline-block;
16 width: 15px;
17 background-image: url("/images/empty.png");
18 background-repeat: no-repeat;
19 }
20 </style>
21 </head>
22 <body>
23 <h2>Images With Ratings</h2>
24 <hr>
25 <div ng-controller="myController">
26 <div ng-repeat="item in items">
27 <img ng-src="{{item.img}}" />
28 {{item.description}}<br>
29 Rating: {{item.rating}} stars<br>
30 <span ng-repeat="idx in stars"
31 ng-class=
32 "{true: 'star', false: 'empty'}[idx <= item.rating]"
33 ng-click="adjustRating(item, idx)">
34 </span>
35 <hr>
36 </div>
37 </div>
38 </body>
39 <script src="http://code.angularjs.org/1.3.0/angular.min.js"></script>
40 <script src="js/rating.js"></script>
41 </html>
Figure 11.5 Implementing a simple star rating in elements using just AngularJS scope data, controller code, and a template view.