Question

我正在使用角度来打开和关闭某些方面（在标题下打开和关闭），我想知道是否有一种方法可以在课间交换当我也这样做时我可以交换一些css。这是我正在做的事情 -

<form name="metaDeta" id="lessonDetails" class="lessonItem" ng-controller="detailsController">
    <div class="small-12 columns">
    <div class="lesonHead lessonHeadOpen saDetailsHead" ng-click="showDetails = ! showDetails"  ng-class="myVar">

            <h5>Lesson Details</h5>
        </div>
        <div class="lessonSASlider" ng-show="showDetails">

这适用于打开和关闭表单，但是有一个类.lessonHeadOpen我想尝试在.lessonHeadClosed之间切换。所以基本上我正在寻找像addClass / removeClass这样的东西，甚至当用户打开并关闭它时单击以在元素上的2个类之间切换。角度有可能吗？我可以解决我所拥有的或必须重新构建的问题。谢谢！

Answer 1

您可以使用ng-class根据表达式的结果动态添加类。
Read ngClass

<div class="lessonHead" ng-click="showDetails = ! showDetails">
  <h5>Lesson Details</h5>
</div>
<div ng-class="{className: showDetails}">
</div>

此指令将评估showDetails表达式，如果为true，则将应用类className

<强>更新
如果我理解正确，请执行相同但反转表达式，如果不是showdetails添加一个类，然后当show details为true时，它将被删除，另一个类被添加。 <div ng-class="{classOne: showDetails , classTwo: !showDetails}">

SEE FIDDLE

Answer 2

您可以使用ng-class进行切换只需为要显示的类添加条件，它将基于条件。

ng-class="{'className': shouldShowClass}"

Answer 3

您可以使用ng-class的三元运算符表示法：

<div ng-class="showDetails? 'lessonHeadOpen': 'lessonHeadClosed'>...</div>

<强> SAMPLE DEMO

类角交换

3 个答案: