Javascript Jquery prevAll（）以角度方式

我有4个空的星星图标。每向前一次，前一颗星就会被遮住。就像本示例中的

Jquery

示例中的

prevAll（）

。但我希望它以一种有角度的方式来完成

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

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

我没有在

li

中包含所有条件。所以，别介意我怎么知道星空的进展在哪里

你知道怎么做吗

jqLite不提供

.prevAll（）

方法。为此，您需要使用jQuery，或者更好地使用

ng class

指令

---

使用

ng类

指令：

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

---

如果您不想加载完整的jQuery库（因为jqLite没有提供preval），那么preval的一个普通JavaScript替代方案是以下代码：

var prevAll = true;
prevAll = [].filter.call(<htmlElement>.parentNode.children, function (htmlElement) {
    return (htmlElement === <htmlElement>) ? prevAll = false : prevAll;
});

---

你可以用不同的方式思考，在没有jQuery的情况下尝试：

你认为如何制定一个指令，由谁来接收星星的数量，并为你呈现每一颗星星

var-app=angular.module（'example'，[]）；
app.controller（'exampleController'，函数（$scope）{
$scope.fool={
评级：5
}
});
应用程序指令（'testCaseCollection'，函数（）{
var getStars=功能（额定值）{
var星=[]；
对于（var i=1；我只是一个提示：使用角度“ng-class”参见我的示例，它有另一个视角无法找到使用
ng class
的方法。假设
第二颗星
持有
id
。那么
第一颗星
必须是阴影，
第二颗星、第三颗星和第四颗星
必须是空的。
var prevAll = true;
prevAll = [].filter.call(<htmlElement>.parentNode.children, function (htmlElement) {
    return (htmlElement === <htmlElement>) ? prevAll = false : prevAll;
});

.directive('testCase', function () {
    return {
        restrict: 'A',
        scope: {
            'condition': '='
        },
        link: function (scope, element, attrs) {
            scope.$watch('condition', function(condition){
                var element = element[0],
                    prevAll = true;
                if(condition){
                    prevAll = [].filter.call(element.parentNode.children, function (htmlElement) {
                        return (htmlElement === element) ? prevAll = false : prevAll;
                    });
                    $(prevAll).addClass("glyphicon-star");
                    // or alternativly
                    /*
                     * [].forEach.call(prevAll, function (item) {
                     *     item.classList.add("glyphicon-star");
                     * });
                     */
                }
            })
        }
    }
});