Question

我有4个空星图标。每次前进时，前一颗星都会被遮挡。与此link中的prevAll()示例中的Jquery一样。但我希望它以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中包含所有条件。所以不介意我怎么知道明星的进展在哪里。

知道怎么做吗？

Answer 1

jqLite不提供

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

More about angular.element

使用ng-class指令：

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

Plnkr in action.

Answer 2

如果你不想加载完整的jQuery库（因为jqLite没有提供prevAll），这是prevAll的Vanilla JavaScript替代方法是这段代码：

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

并且prevAll将包含数组中<htmlElement>的所有先前HTMLElement。

因此，在您的情况下，下面的代码可以完成这项工作：

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

More Vanilla alternavive for jqLite and jQuery here

Answer 3

您可以认为不同并尝试不使用jQuery ：

你怎么看待收到星星数量的指令并为你渲染每一颗星？

＆＃13;

var app = angular.module('example', []);

app.controller('exampleController', function($scope) {
  $scope.fool = {
    rating: 5
  }
});

app.directive('testCaseCollection', function () {
    var getStars = function(rating) {
      var stars = [];
      for (var i = 1; i <= 5; i++) {
        stars.push({
          active: (i <= rating)
        });
      }
      return stars;
    };
  
    return {
        restrict: 'A',
        scope: {
            'rating': '='
        },
        link: function (scope, element, attrs) {
            scope.$watch('rating', function(rating) {
                scope.stars = getStars(rating);
            })
        },
        template: '<ul><li ng-repeat="star in stars" ng-class="star.active ? \'cls-1\' : \'cls-2\'">{{star.active}}</li></ul>'
    }
});

＆＃13;

.cls-1 {
  color: red;
}

.cls-2 {
  color: green;
}

＆＃13;

<!DOCTYPE html>
<html ng-app="example">
  <head>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="exampleController">
    <input type="range" min="0" max="5" ng-model="fool.rating" />
    <p>Your selected rating is: {{fool.rating}}</p>
    <div test-case-collection data-rating="fool.rating"></div>
  </body>

</html>

＆＃13;

以角度方式Jquery prevAll（）

3 个答案: