I successfully incorporated the bootstrap star rating feature in an angularjs project. Although everything is functioning properly, I am encountering an issue with retrieving the final rating value after submitting the form. Below is the code snippet:
// JavaScript code
angular.module('plunker', ['ui.bootstrap']);
var RatingDemoCtrl = function ($scope) {
$scope.submit = function() {
console.log($scope.overStar); // always returns null
}
$scope.rate = 1;
$scope.max = 5;
$scope.isReadonly = false;
$scope.hoveringOver = function(value, object) {
$scope.overStar = value;
$scope.percent = 100 * (value / $scope.max);
};
};
// HTML code
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="RatingDemoCtrl" class="well well-small">
<form class="Scroller-Container" ng-submit="submit()" >
<rating value="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" ></rating>
<span class="badge" ng-class="{'badge-warning': percent<30, 'badge-info': percent>=30 && percent<70, 'badge-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span>
</div>
<input type="submit" id="submit" value="Submit" />
</form>
</body>
</html>
Despite attempting to use ng-click to set the value, it does not trigger for some unknown reason. Has anyone encountered this issue before and can provide assistance? Thank you.