Jquery prevAll() in Angular way

Question

I have 4 empty star icons. And every time it goes forward the previous star will be shaded. Just like prevAll() in Jquery sample in this link. But I want it to be done in Angular way.

So far this is my work:

<ul>
    <li test-case condition="someConditions" class="star glyphicon glyphicon-star-empty"></li>
    <li test-case condition="someConditions" class="star glyphicon glyphicon-star-empty"></li>
    <li test-case condition="someConditions" class="star glyphicon glyphicon-star-empty"></li>
    <li test-case condition="someConditions" class="star glyphicon glyphicon-star-empty"></li>
</ul>

My directive:

.directive('testCase', function () {
    return {
        restrict: 'A',
        scope: {
            'condition': '='
        },
        link: function (scope, element, attrs) {
            scope.$watch('condition', function(condition){
                if(condition){
                    element.prevAll().addClass('glyphicon-star'); // this line won't work
                }
            })
        }
    }
});

I didn't include all the conditions in the li. So don't mind how can I tell where the progress of star is.

Any idea how to do this?

Answer 1

.prevAll() method is not provided by jqLite. For this you need to use jQuery or better to use ng-class directive.

More about angular.element

---

With ng-class directive:

<li test-case ng-class="{glyphicon-star:someConditions}"></li>

Plnkr in action.