current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 0 down vote favorite

I've created a rating system using Angular-UI. The number of stars displayed come from a variable called max. I'm able to show this variable inside an input using ng-model, but once I modify it, it won't change the number of stars.

You can see what I mean in this Plunker.

Here's the relevant js:

.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);
};

};

The ng-model is working correctly as it will show the value of max everytime, but it won't modify it in real time.

Any ideas?

share|improve this question
    
angulartutorial.blogspot.in/2014/03/… – prash Apr 10 '14 at 16:44

3 Answers 3

up vote 2 down vote accepted

It is totally doable. Copy down the ui-bootstrap code and alter it a little bit. I hacked inside and it seems to be working great. Check out a working PLUNKER. Here are the changes I made, they can be seen on lines 2493-2559.

First I went into the directive and added maxRange as a two-way bound object

scope: {
  value: '=',
  onHover: '&',
  onLeave: '&',
  maxRange: '=max'
},

Then I went into the controller and changed a few things so I could watch the maxRange value and update the objects based on that.

$scope.$watch('maxRange', function() {
  $scope.range = createRateObjects(new Array(parseInt($scope.maxRange)));
});

Hacking rocks. Don't be afraid to modify other people's code a little bit if it doesn't fit your needs!

share|improve this answer
    
Zack, Fan-tas-tic – Eric Mitjans Mar 3 '14 at 5:15
2  
@EricMitjans, you should change the title of this question to something like "UI-Rating Directive changeable max value" or something. The current title might not be helpful for people with a similar problem! – Zack Argyle Mar 3 '14 at 6:21
    
You're right. Done! – Eric Mitjans Mar 3 '14 at 7:01
up vote 1 down vote

I've just quickly looked over this problem and it seems like the AngularJS Bootstrap Rating directive doesn't handle updating the max value on the fly.

share|improve this answer
    
Any ideas about a posible workaround? Thanks Mike! – Eric Mitjans Mar 3 '14 at 4:13
1  
I think the easiest solution is to wrap your own rating directive for this. Otherwise either monkey-patch their code, make a Pull Request for this issue, or report the issue and fiddle with your thumbs. EDIT: Also on how to do it you might want to take a look at how they did it. rating.js rating.html – MikeMatrix Mar 3 '14 at 4:19
    
Hi Mike, I redid it using this example: befundoo.com/university/tutorials/angularjs-directives-tutorial The rating system works flawlessly, buuut, same problem updating the star variable on the fly. You can see the new Plunker here: plnkr.co/edit/nYQ2lbq0O0ecXOEB20vK?p=preview What else could it be? Somehow I'm binding it one-way (variable -> input), but not the other way around... – Eric Mitjans Mar 3 '14 at 4:55
up vote 0 down vote

I accidentally found another hack for this:

Wrapping your rating-directive in a ng-if also seems to work.

<div ng-if="true">
  <rating max="myVar"></rating>
</div>

According to the angular documentation, ng-if will reinsert the HTML on each evaluation, triggering a re-evaluation of myVar.

Yes, it is still a bit hacky, but I think it is prettier than changing code in your bower_components-folder which will be overwritter on each update.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.