Angular Bootstrap UI rating system - Changing max value using ng-model

Question

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 every time, but it won't modify it in real time.

Any ideas?

Zack Argyle · Accepted Answer · 2014-03-03 04:50:29Z

2

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!

answered Mar 3, 2014 at 4:50

Zack Argyle

8,4674 gold badges31 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zack Argyle Over a year ago

@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!

MikeMatrix · Accepted Answer · 2014-03-03 04:10:16Z

1

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.

answered Mar 3, 2014 at 4:10

MikeMatrix

261 bronze badge

2 Comments

MikeMatrix Over a year ago

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

Eric Mitjans Over a year ago

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...

raoel · Accepted Answer · 2015-03-16 12:29:14Z

0

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.

answered Mar 16, 2015 at 12:29

raoel

3203 silver badges11 bronze badges

Collectives™ on Stack Overflow

Angular Bootstrap UI rating system - Changing max value using ng-model

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related