AngularJS UI Bootstrap rating control

Question

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?

are you trying to change the number of checkmarks with every click? this will be very confusing for users. — Eliran Malka
– Eliran Malka, Commented Mar 9, 2014 at 23:08
My exact use case would only discourage other SO users from helping me. This is just an esence of my problem... I would like to have multiple rating elements like this. Then have fixed amount of point to distribute across multiple ratings. So when one rating is decreased from 7 to 4, all other rating element now have an extra 3 points available. When one of the rating uses up these 3 points, then all of them don't have any extra points available... — AndroC
– AndroC, Commented Mar 9, 2014 at 23:24
in the contrary - the more you depict the issue, the easier it is to help. — Eliran Malka
– Eliran Malka, Commented Mar 9, 2014 at 23:28

j.wittwer · Accepted Answer · 2014-03-10 05:15:07Z

2

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.

answered Mar 10, 2014 at 5:15

j.wittwer

9,4973 gold badges32 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

AngularJS UI Bootstrap rating control

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related