CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
AndroC
AndroC

Reputation: 4884

AngularJS UI Bootstrap rating control

I am trying to bind directive's attribute to a scope variable. I would like my UI Bootstrap control to dynamically change appearance when this scope variable changes value.

Here is the plunker: http://plnkr.co/edit/gEjerpXhy3IuT5qRNeL8?p=preview

Every time you press on some of the checkmarks, $scope.max is increased by 1. But, since that same $scope.max is passed to the 'rating' element as the 'max' attribute, I would like this 'rating' element to put additional checkmark on the right every time I click on some of the existing checkmarks.

I guess I am trying to re-draw this 'rating' element with new parameters. Is this possible and how?

Upvotes: 0

Views: 2922

Answers (1)

j.wittwer
j.wittwer

Reputation: 9497

I was able to simulate the behavior you want by adding an ng-if to the element, and modifying a boolean value when the rating changes.
<rating ng-if="render" value="rating.x" max="rating.max"...

    $scope.rating.max += 1;        
    $scope.render = false;
    $timeout(function() {
      $scope.render = true;  
    }, 0, true);

Here is a demo, forked from your original plunkr.

For what it is worth, I think you would be better off customizing the directive's source or just writing your own. This workaround isn't going to scale, and it wouldn't be too hard to sprinkle in the functionality you need.

Upvotes: 2

Related Questions