I am attempting to change the direction of the arrow in my checkbox by utilizing two classes with the assistance of ng-class.
Unfortunately, it is not producing the desired outcome.
Below is my code:
Note: The angularJS CDN has already been incorporated.
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';
};