alikrc/angular - rating (star).html

## angular - rating (star).html
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body ng-app="app">

    <div ng-controller="ratingDemoCtrl">
        <h4>Default</h4>
        <rating ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null"></rating>

        <span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span>

        <pre style="margin:15px 0;">Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar || "none"}}</b></pre>

        <button class="btn btn-sm btn-danger" ng-click="rate = 0" ng-disabled="isReadonly">Clear</button>
        <button class="btn btn-sm btn-default" ng-click="isReadonly = ! isReadonly">Toggle Readonly</button>
        <hr />

        <h4>Custom icons</h4>
        <div ng-init="x = 5"><rating ng-model="x" max="15" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'"></rating> <b>(<i>Rate:</i> {{x}})</b></div>
        <div ng-init="y = 2"><rating ng-model="y" rating-states="ratingStates"></rating> <b>(<i>Rate:</i> {{y}})</b></div>


        <div ng-repeat="o in arr">
            {{o.name}}
            <rating ng-model="o.rate" max="max" readonly="false" on-hover="hoveringOver(value,o)" on-leave="o.overStar = null"></rating>
            <span class="label" ng-class="{'label-warning': o.percent<30, 'label-info': o.percent>=30 && o.percent<70, 'label-success': o.percent>=70}" ng-show="o.overStar && !isReadonly">{{o.percent}}%</span>
            {{o.rate}}

        </div>
        <pre>   {{arr | json}}</pre>
    </div>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" media="all" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>


    <script>


        var app = angular.module("app", ['ui.bootstrap']);
        app.controller('ratingDemoCtrl', ['$scope', function ($scope) {

            $scope.arr = [{ name: 1, rate: 1 }, { name: 2, rate: 2 }, { name: 3, rate: 3 }];

            $scope.rate = 7;
            $scope.max = 10;
            $scope.isReadonly = false;

            $scope.hoveringOver = function (value,o) {
                //$scope.overStar = value;
                //$scope.percent = 100 * (value / $scope.max);
                o.percent = 100 * (value / $scope.max);
                o.overStar = value;
            };

            $scope.ratingStates = [
              { stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle' },
              { stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty' },
              { stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle' },
              { stateOn: 'glyphicon-heart' },
              { stateOff: 'glyphicon-off' }
            ];
        }]);
    </script>
</body>
</html>
	<!DOCTYPE html>

	<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta charset="utf-8" />
	<title></title>
	</head>
	<body ng-app="app">

	<div ng-controller="ratingDemoCtrl">
	<h4>Default</h4>
	<rating ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null"></rating>

	<span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span>

	<pre style="margin:15px 0;">Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar \|\| "none"}}</b></pre>

	<button class="btn btn-sm btn-danger" ng-click="rate = 0" ng-disabled="isReadonly">Clear</button>
	<button class="btn btn-sm btn-default" ng-click="isReadonly = ! isReadonly">Toggle Readonly</button>
	<hr />

	<h4>Custom icons</h4>
	<div ng-init="x = 5"><rating ng-model="x" max="15" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'"></rating> <b>(<i>Rate:</i> {{x}})</b></div>
	<div ng-init="y = 2"><rating ng-model="y" rating-states="ratingStates"></rating> <b>(<i>Rate:</i> {{y}})</b></div>


	<div ng-repeat="o in arr">
	{{o.name}}
	<rating ng-model="o.rate" max="max" readonly="false" on-hover="hoveringOver(value,o)" on-leave="o.overStar = null"></rating>
	<span class="label" ng-class="{'label-warning': o.percent<30, 'label-info': o.percent>=30 && o.percent<70, 'label-success': o.percent>=70}" ng-show="o.overStar && !isReadonly">{{o.percent}}%</span>
	{{o.rate}}

	</div>
	<pre> {{arr \| json}}</pre>
	</div>




	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" media="all" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>



	<script>


	var app = angular.module("app", ['ui.bootstrap']);
	app.controller('ratingDemoCtrl', ['$scope', function ($scope) {

	$scope.arr = [{ name: 1, rate: 1 }, { name: 2, rate: 2 }, { name: 3, rate: 3 }];

	$scope.rate = 7;
	$scope.max = 10;
	$scope.isReadonly = false;

	$scope.hoveringOver = function (value,o) {
	//$scope.overStar = value;
	//$scope.percent = 100 * (value / $scope.max);
	o.percent = 100 * (value / $scope.max);
	o.overStar = value;
	};

	$scope.ratingStates = [
	{ stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle' },
	{ stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty' },
	{ stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle' },
	{ stateOn: 'glyphicon-heart' },
	{ stateOff: 'glyphicon-off' }
	];
	}]);
	</script>
	</body>
	</html>