将jquery函数转换为angular?

时间:2017-06-07 09:43:49

标签: angularjs less

HTML:

<div class="day-row" ng-repeat="(a, b) in $ctrl.myModel">
     <div class="col-lg">
         <a href="#" class="my-btn" aria-hidden="true" ng-click="$ctrl.toggleTimepickerPopup($event)"></a>
         <div class="the-container">

LESS:

         &.set-time {
            .timepicker-container {
              display: block;
            }
          }

JavaScript的:

jquery(".my-btn").each(function () {
        if (jquery(this).is(jquery(event.target))) {
            jquery(this).parent().toggleClass('set-time');
        } else {
            jquery(this).parent().removeClass('set-time');
        }
    });
    event.preventDefault();

这个jquery函数切换链接的类 单击,并删除ng-repeat中所有其他链接的类。

如果可能,我想将其转换为角度。我有一个类似的问题Toggle class of parent element using ng-click?,其中所选答案有效,但现在我需要将其扩展为不仅切换父元素的类,而是从所有兄弟元素的父元素中删除该类。

1 个答案:

答案 0 :(得分:1)

假设b是您的对象,您可以执行以下操作:

<div class="day-row" 
     ng-repeat="(a, b) in $ctrl.myModel">
     <div class="col-lg"
          ng-class="{ 'set-time': $ctrl.selected === b }">
         <a href="#" class="my-btn" aria-hidden="true" 
            ng-click="$ctrl.selected = b"></a>

这将在单击锚点时切换div上的类set-time,并删除所有其他元素上的类。