CODEWITHSUNDEEP
javascripthtmlcssangularjs
Marco Vanin
Marco Vanin

Reputation: 13

unable to change class using ng-class

I am trying to reverse the direction of the arrow in my checkbox by using two classes with help of ng-class. Its not working as expected.

Here is my code:

PS : angularJS CDN is already integrated.

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>

style.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';
};

Upvotes: 1

Views: 208

Answers (2)

Ganz
Ganz

Reputation: 76

since onlineClass is a function you can use : 

<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>

Upvotes: 1

Protozoid
Protozoid

Reputation: 1207

Try adding () after the function name in order to actually call the it in your ng-class code and also add a parameter as your function's definition is function(a).

Something like this:

<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>

P.S. Why would you want to tinker with a web standard element that everyone understands?

Upvotes: 0

Related Questions