javascript - Jquery prevAll() 以 Angular 方式

Question

我有 4 个空的星形图标。每次前进时，前一颗星都会被遮住。就像这个 link 中 Jquery 示例中的 prevAll() .但我希望它以 Angular 方式完成。

到目前为止，这是我的工作:

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

我的指令:

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

我没有在 li 中包含所有条件。所以不要介意我怎么知道star的进度在哪里。

知道怎么做吗？

Answer 1

jqLit​​e 没有提供

.prevAll() 方法。为此，您需要使用 jQuery 或更好地使用 ng-class 指令。

More about angular.element

---

使用 ng-class 指令:

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

Plnkr in action.