Question

我有一些javascript，我试图转换为Angular：

$('.col-lg .fa-clock-o').click(function(e){
    $(this).parent().toggleClass('set-time');
    e.preventDefault()
});

我已经尝试将以下内容添加到包含该链接的子元素中，但它不起作用，也许是正确的角色＆＃39;这样做的方法呢？

<a href="#" class="fa fa-clock-o" aria-hidden="true" ng-click="$(this).parent().toggleClass('set-time')"></a>

Answer 1

更多'Angular'方法是设置一个变量，表示父元素上是否存在set-time类。默认情况下，这将是undefined，这是假的。

然后要在ng-click中切换它，你可以将值设置为与当前值相反。

<div ng-class="{'set-time': setTimeClass}">
    <a href class="fa fa-clock-o" aria-hidden="true" ng-click="setTimeClass = !setTimeClass">toggle class</a>
</div>

这是一个有效的例子：

var app = angular.module('app', []);

.set-time {
 background :red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
     <div ng-class="{'set-time': setTimeClass}">
        <a href class="fa fa-clock-o" aria-hidden="true" ng-click="setTimeClass = !setTimeClass">toggle class</a>
    </div>
    
</div>

Answer 2

以下作品，但不确定其角度方式：

HTML：

<a href="#" class="fa fa-clock-o" aria-hidden="true" ng-click="$ctrl.toggleTimepickerPopup($event)"></a>

控制器：

public toggleTimepickerPopup(event : any) : void{
    jquery(event.target).parent().toggleClass('set-time');
    event.preventDefault()
}

Answer 3

父母不是一个功能，它是一个原型：

正确用法是： $(this).parent

你的锚元素：

<a href="#" class="fa fa-clock-o" aria-hidden="true" ng-click="$(this).parent.toggleClass('set-time')"></a>

使用ng-click切换父元素的类？

3 个答案: