如何在点击元素时使用切换CSS类？

Question

使用Angular TypeScript，不使用$scope。我看到了很多关于$scope或JQuery的例子。我想要一个可点击的省略号，当点击时会删除类的overflow和text-overflow属性，以便我可以展开我正在截断的div的完整文本。我认为我想要使用ng-class或为ng-click创建一个函数，但我找不到任何不使用$scope.class的示例，并且在TypeScript中不能只是使用this.class。

以下是我尝试切换的CSS类：

.homeDescriptionDiv {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.homeDescriptionDiv2 {
}

这是一个HTML元素，不含任何Angular引用：

<div class="col-md-12 homeDescriptionDiv" ng-click="changeClass()">
                                <h4>
                                    Description
                                </h4>
                                {{challenge.description}}
                            </div>

我的控制器中的TypeScript代码可能如下：

element.class = class1;
function changeClass(){
this.class=class2
}

最终，我希望能够通过再次点击来切换，但删除第一个类是核心要求。谢谢！

- ScottVMeyers

---

请提供一个代码示例，这将有助于我们找到您的问题。 - toskv

此外，我建议您阅读如何提出好问题指南。 :) http://stackoverflow.com/help/how-to-ask - toskv

谢谢，抱歉，我尝试了，但我是新手，今天太累了，喝了太多咖啡因！我已经发布了我拥有的代码。 - ScottVMeyers

Answer 1

在你的控制器中有一个属性showClass，然后将其绑定到元素上，如ng-class="{'some-class': vm.showClass}"

现在如果showClass为true，则元素获取some-class，否则some-class被移除。控制器上的toggle函数只是 this.showClass = !this.showClass

- basarat