javascript - 无法使用 ng-class 更改类

Question

我试图通过在 ng-class 的帮助下使用两个类来反转复选框中箭头的方向。 它没有按预期工作。

这是我的代码:

PS : angularJS CDN 已经集成。

test.php

<div class="container">
  <div class="row">
    <div class="col-md-12" >
      <div class="check-element animate-show-hide" ng-show="checked" style="display:inline-block;width:100%;overflow-y:auto;" >
        <ul class="timeline timeline-horizontal"  >
          <li class="timeline-item" ng-repeat="s in steps">
            <div class="timeline-badge" ng-class="{'navion':s.status === 1, 'timeline-badge-green':s.status === 0}"></div>
            <div class="timeline-panel">
              <div class="timeline-heading">
                <h4 class="timeline-title">{{s.status === 1 ? "In progress" : (s.status === 0)? (s.date | date:"MMM d, y") : "Pending"}}</h4>
              </div>
              <div class="timeline-body">
                <p>{{s.description}}</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<br>

<div id="ck-button">
  <label>
    <input type="checkbox" value="1"  ng-model="checked" aria-label="Toggle ngShow"><i ng-class="{onlineClass}"></i>
  </label>
</div>

样式.css

label i {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 8px;
  }

  .up {
    -webkit-transform: rotate(-135deg);
    margin-left: 27%;
    margin-top: 38%;
  }

  .down {
    -webkit-transform: rotate(45deg);
    margin-left: 27%;
    margin-top: 18%;
  }

  div label input {
    margin-right:100px;
  }

  body {
    font-family:sans-serif;
  }

  #ck-button {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
  }

  #ck-button {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
  }

  #ck-button:hover {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid red;
    overflow:auto;
    float:left;
    color:red;
  }

  #ck-button label {
    float:left;
    width:4.0em;
    height: 40px;
    width: 40px;
  }

  #ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
  }

  #ck-button label input {
    position:absolute;
    top:-20px;
  }

  #ck-button input:checked + span {
    background-color:#911;
    color:#fff;
  }

j_TestCtrl.js

$scope.onlineClass = function(a) {
    return (a > 0) ? 'up' : 'down';
};

Answer 1

因为 onlineClass 是您可以使用的函数:

<div id="ck-button">
    <label>
        <input type="checkbox" value="1"  ng-model="checked" aria-label="Toggle ngShow">
        <i ng-class="onlineClass(checked)"></i>
    >/label>
</div>