Skip to content

Instantly share code, notes, and snippets.

@wuliupo

wuliupo/rank-star.htm

Last active November 9, 2016 03:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save wuliupo/f048882b1d6b9ca1b738965a08eabc33 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save wuliupo/f048882b1d6b9ca1b738965a08eabc33 to your computer and use it in GitHub Desktop.
Download ZIP
Rank Star via Angular 1
Raw
rank-star.htm
<!doctype html>
<html lang="en" ng-app="demoApp">
<head>
<meta charset="UTF-8">
<title>Rank Star</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.glyphicon-star.orange{margin-right:3px;padding:2px;border-radius:3px;text-align:center;font-size:10px;color:#FFF;background-color:#f63;}
.glyphicon-star.gray{margin-right:3px;padding:2px;border-radius:3px;text-align:center;font-size:10px;background-color:#CCC;color:#FFF;}
.big .glyphicon-star{font-size:18px;margin:-2px 8px 0 0;}
.edit .glyphicon-star{cursor:pointer;}
</style>
</head>
<body>
<div class="container" ng-controller="demoCtrl">
<h1>Rank Star via Angular 1</h1>
<div class="well">
<h3>Plain icon</h3>
<div>Rank Star = {{data.rank1}}： <span rank-star="data.rank1"></span></div>
<hr/>
<h3>Editable, click to rank</h3>
<div>Rank Star = {{data.rank2}}： <span rank-star="data.rank2" edit="1"></span></div>
<hr/>
<h3>Big icon</h3>
<div class="big">Rank Star = {{data.rank3}}： <span rank-star="data.rank3" edit="1" max="8"></span></div>
<hr/>
<h3>Usage</h3>
<pre>&lt;span rank-star="data" edit="1" max="5"&gt;&lt;/span&gt;</pre>
</div>
</div>
<script src="http://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
<script>
(function(){
angular.module('demoApp', []).controller('demoCtrl', ['$scope', function($scope){
$scope.data = {
rank1: 4,
rank2: 3,
rank3: 2
};
}]).directive('rankStar', ['$timeout', function($timeout){
return {
restrict: 'A',
scope: {
rankStar: '=',
edit: '@',
max: '@'
},
template: '<span ng-repeat="k in all"><span class="glyphicon glyphicon-star" ng-class="((rankStar >= k && !testStar) || testStar >= k) ? \'orange\' : \'gray\'" ng-click="rank(k)" ng-mouseenter="trail(k)" ng-mouseleave="trail()"></span></span>',
link: function($scope, element){
$scope.rankStar = parseInt($scope.rankStar) || 0;
if ($scope.rankStar > 5) {
$scope.rankStar = 2;
}
if (!$scope.max) {
$scope.max = 5;
}
$scope.all = [];
for(let i = 1; i <= $scope.max; i++){
$scope.all.push(i);
}
element.attr('title', 'Rank in star: ' + $scope.rankStar);
if($scope.edit){
$scope.rank = function(k){
$scope.rankStar = k;
}
$scope.trail = function(k){
$timeout(function(){
$scope.testStar = k;
}, 100)
}
element.addClass('edit');
}
}
}
}]);
})();
</script>
</body>
</html>
@wuliupo
Copy link
Copy Markdown
Author

wuliupo commented Nov 9, 2016 •
edited
Loading

If you dont like boostrap's glyphicon, you can use css star.

.star-five {
	display: inline-block;
	position: relative;
	margin: 50px 0;
	width: 0;
	height: 0;
	border-right: 100px solid transparent;
	border-bottom: 70px solid red;
	border-left: 100px solid transparent;
	-moz-transform: rotate(35deg);
	-webkit-transform: rotate(35deg);
	-ms-transform: rotate(35deg);
	-o-transform: rotate(35deg);
	transform: rotate(35deg);
}
.star-five:before {
	position: absolute;
	top: -45px;
	left: -65px;
	width: 0;
	height: 0;
	content: '';
	-webkit-transform: rotate(-35deg);
	-moz-transform: rotate(-35deg);
	-ms-transform: rotate(-35deg);
	-o-transform: rotate(-35deg);
	transform: rotate(-35deg);
	border-bottom: 80px solid red;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
}
.star-five:after {
	position: absolute;
	top: 3px;
	left: -105px;
	width: 0;
	height: 0;
	content: '';
	border-right: 100px solid transparent;
	border-bottom: 70px solid red;
	border-left: 100px solid transparent;
	-webkit-transform: rotate(-70deg);
	-moz-transform: rotate(-70deg);
	-ms-transform: rotate(-70deg);
	-o-transform: rotate(-70deg);
	transform: rotate(-70deg);
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment