Jquery prevAll() in Angular way

Jquery prevAll() in Angular way

本文关键字：Angular way in prevAll Jquery      更新时间：2023-09-26

我有4个空的星形图标。每次它向前移动，前一颗恒星都会被遮蔽。就像这个链接中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中包含所有条件。所以，别介意我怎么才能知道恒星的进展在哪里。

知道怎么做吗？

.prevAll()方法不是由jqLite提供的。为此，您需要使用jQuery或更好地使用ng-class指令。

更多关于角度元件的信息

带有ng-class指令：

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

Plnkr在行动。

如果您不想加载完整的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");
                     * });
                     */
                }
            })
        }
    }
});

更多适用于jqLite和jQuery的Vanilla Alternave

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

你认为如何制定一个指令，由谁接收恒星的数量，并为你渲染每一颗恒星？

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>'
    }
});
.cls-1 {
  color: red;
}
.cls-2 {
  color: green;
}
<!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>

相关文章：