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.
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.
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>