I have implemented a rating system using Angular-UI. The number of stars displayed is determined by a variable named max. While I am able to display this variable within an input field using ng-model, any modifications made to it do not reflect in the number of stars displayed.
You can observe this behavior in the following Plunker.
Below is the pertinent javascript code:
.directive('myRating', function() {
return {
restrict: 'E',
template: '<div> \
<div class="row rating" ng-controller="RatingDemoCtrl"> \
<rating value="rate" max="max" readonly="isReadonly" state-on="\'glyphicon-star rated\'" state-off="\'glyphicon-star\'"></rating> <a class="glyphicon glyphicon-pencil" ng-show="editMode" ng-click="editStars = !editStars"></a>\
<input ng-if="editStars" type="text" class="form-control" ng-model="max" /> \
</div> \
</div>',
replace: true,
};
});
var RatingDemoCtrl = function ($scope) {
$scope.rate = 0;
$scope.max = 10;
$scope.isReadonly = false;
$scope.hoveringOver = function(value) {
$scope.overStar = value;
$scope.percent = 100 * (value / $scope.max);
};
};
Although the ng-model successfully displays the value of max each time, real-time modifications are not reflected. Any suggestions on how to address this issue?