<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
Angular Span element on click
</
title
>
<
script
src
=
</
script
>
<
link
rel
=
"stylesheet"
href
=
<
style
>
.checked {
color: orange;
}
.rateButton {
border-radius: 12px;
background-color: goldenrod;
}
table {
margin-left: auto;
margin-right: auto;
}
</
style
>
</
head
>
<
body
style
=
"text-align: center"
>
<
h1
style
=
"color:green"
>
GeeksforGeeks
</
h1
>
<
h3
>
Displaying the span element for
each rows clicked in AngularJS
</
h3
>
<
div
ng-app
=
"mainApp"
ng-controller
=
"RatingController"
>
<
table
>
<
tr
>
<
td
>Rate Product</
td
>
<
td
>
<
span
ng-show="rating>=1"
ng-hide="rating<
1
"
class
=
"fa fa-star checked"
>
</
span
>
<
span
ng-hide="rating>=1"
ng-show="rating<
1
"
class
=
"fa fa-star unchecked"
>
</
span
>
<
span
ng-show="rating>=2"
ng-hide="rating<
2
"
class
=
"fa fa-star checked"
>
</
span
>
<
span
ng-hide="rating>=2"
ng-show="rating<
2
"
class
=
"fa fa-star unchecked"
>
</
span
>
<
span
ng-show="rating>=3"
ng-hide="rating<
3
"
class
=
"fa fa-star checked"
>
</
span
>
<
span
ng-hide="rating>=3"
ng-show="rating<
3
"
class
=
"fa fa-star unchecked"
>
</
span
>
<
span
ng-show="rating>=4"
ng-hide="rating<
4
"
class
=
"fa fa-star checked"
>
</
span
>
<
span
ng-hide="rating>=4"
ng-show="rating<
4
"
class
=
"fa fa-star unchecked"
>
</
span
>
<
span
ng-show="rating>=5"
ng-hide="rating<
5
"
class
=
"fa fa-star checked"
>
</
span
>
<
span
ng-hide="rating>=5"
ng-show="rating<
5
"
class
=
"fa fa-star unchecked"
>
</
span
>
</
td
>
<
td
>
<
button
ng-click
=
"Rating()"
class
=
'rateButton'
> Click
</
button
>
</
td
>
</
tr
>
</
table
>
</
div
>
<
script
>
var app = angular.module("mainApp", []);
app.controller('RatingController', function($scope) {
$scope.rating = 0;
$scope.Rating = function() {
$scope.rating++;
};
});
</
script
>
</
body
>
</
html
>