Calling dynamic classes (with respect to condition) in angular js using ng-class

Question

I am trying to call different classes (from my css) as per the variable 'statetostartwaves'. If this variable is '0' then class 1 (preloader_pause waves) should be called or else if it is '1' then class 2(preloader waves) should be called

HTML

<div  ng-class="statetostartwaves ===0 ? 'preloader_pause waves':(statetostartwaves ===1 ? 'preloader waves')" >
        <span></span>
        <span></span>
        <span></span>
 </div>

My anugular app controller

selektApp.controller('homeController',['$scope','$timeout',function($scope,$timeout) {

    $scope.statetostartwaves=0;
    $timeout(function(){

        $scope.statetostartwaves=1;


    ,}500);


}]);

The following is my css for animation

.waves {
    opacity:0;
  -webkit-animation: second 3s forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 1s;
  animation: second 2s forwards;
  animation-iteration-count: 1;
  animation-delay: 1.2s;
  position: relative;
}
@-webkit-keyframes second {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
    top: -19px; 
  }
}
@keyframes second {
  30% {
    opacity: 0;
    top:-50px;
  }
  100% {
    opacity: 1;
    top: -200px; 
  }
}
.preloader {
  position: relative;
  width: 65px;
  margin: 0px 0px 0px 130px;
}
.preloader span {
  position: absolute;
  display: block;
  bottom: -300px;
  left: 350px;
  width: 15px;
  height: 15px;


  border-radius: 10px;
  background: #3498db;
  -webkit-animation: preloader .6s infinite ease-in-out;
          animation: preloader .6s infinite ease-in-out;
}
.preloader span:nth-child(2) {
  left: 390px;
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
}
.preloader span:nth-child(3) {
  left: 430px;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

@-webkit-keyframes preloader {
  0% {
    height: 30px;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    background: #3498db;
  }
  25% {
    height: 30px;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    background: #3498db;
  }
  50%,100% {
    height: 60px;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    background: #3498db;
  }
}

@keyframes preloader {
  0% {
    height: 15px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
  25% {
    height: 90px;
    -webkit-transform: translateY(45px);
            transform: translateY(45px);
    background: #3498db;
  }
  50%,100% {
    height: 15px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
}



.preloader_pause {
  position: relative;
  width: 65px;
  margin: 0px 0px 0px 130px;
}
.preloader_pause span {
  position: absolute;
  display: block;
  bottom: -300px;
  left: 350px;
 width: 15px;
  height: 15px;

  border-radius: 10px;
  background: #3498db;
  -webkit-animation: preloader 0s infinite ease-in-out;
          animation: preloader 0s infinite ease-in-out;
}
.preloader_pause span:nth-child(2) {
  left: 390px;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}
.preloader_pause span:nth-child(3) {
  left: 430px;
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
}
.preloader_pause span:nth-child(4) {
  left: 33px;
  -webkit-animation-delay: 600ms;
          animation-delay: 600ms;
}
.preloader_pause span:nth-child(5) {
  left: 44px;
  -webkit-animation-delay: 800ms;
          animation-delay: 800ms;
}
.preloader_pause span:nth-child(6) {
  left: 55px;
  -webkit-animation-delay: 1000ms;
          animation-delay: 1000ms;
}

@-webkit-keyframes preloader {
  0% {
    height: 5px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
  25% {
    height: 30px;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    background: #3498db;
  }
  50%,100% {
    height: 5px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
}

@keyframes preloader_pause {
  0% {
    height: 15px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
  25% {
    height: 60px;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    background: #3498db;
  }
  50%,100% {
    height: 5px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
}

what is the issue?

xkeshav
– xkeshav

2017-04-10 07:04:20 +00:00
Commented Apr 10, 2017 at 7:04 — xkeshav
– xkeshav, Commented Apr 10, 2017 at 7:04

xkeshav · Accepted Answer · 2017-04-10 06:54:17Z

3

you can try

ng-class="[{0: 'preloader_pause waves', 1 : 'preloader waves'}[statetostartwaves]]"

also there is a syntax error in your $timeout function

$timeout(function(){ $scope.statetostartwaves=1;}, 500);

answered Apr 10, 2017 at 6:54

xkeshav

54.2k47 gold badges183 silver badges255 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sachila Ranawaka · Accepted Answer · 2017-04-10 07:26:22Z

when you are using else if condition using ternary operation, else condition is a must. modify the condition like this

 ng-class="statetostartwaves ===0 ? 'preloader_pause waves':(statetostartwaves ===1 ? 'preloader waves' : 'no class')"

also in $timeout, comma shoud comes after the curly bracket. change ,}500); to },500);

angular.module("app",[])
.controller("ctrl",function($scope,$timeout){
$scope.statetostartwaves = 0;
console.log('state>', $scope.statetostartwaves);
$timeout(function() {
	$scope.statetostartwaves = 1;
	console.log('state1>', $scope.statetostartwaves);
}, 500);

})

.waves {
    opacity:0;
  -webkit-animation: second 3s forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 1s;
  animation: second 2s forwards;
  animation-iteration-count: 1;
  animation-delay: 1.2s;
  position: relative;
}
@-webkit-keyframes second {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
    top: -19px; 
  }
}
@keyframes second {
  30% {
    opacity: 0;
    top:-50px;
  }
  100% {
    opacity: 1;
    top: -200px; 
  }
}
.preloader {
  position: relative;
  width: 65px;
  margin: 0px 0px 0px 130px;
}
.preloader span {
  position: absolute;
  display: block;
  bottom: -300px;
  left: 350px;
  width: 15px;
  height: 15px;


  border-radius: 10px;
  background: #3498db;
  -webkit-animation: preloader .6s infinite ease-in-out;
          animation: preloader .6s infinite ease-in-out;
}
.preloader span:nth-child(2) {
  left: 390px;
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
}
.preloader span:nth-child(3) {
  left: 430px;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

@-webkit-keyframes preloader {
  0% {
    height: 30px;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    background: #3498db;
  }
  25% {
    height: 30px;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    background: #3498db;
  }
  50%,100% {
    height: 60px;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    background: #3498db;
  }
}

@keyframes preloader {
  0% {
    height: 15px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
  25% {
    height: 90px;
    -webkit-transform: translateY(45px);
            transform: translateY(45px);
    background: #3498db;
  }
  50%,100% {
    height: 15px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
}



.preloader_pause {
  position: relative;
  width: 65px;
  margin: 0px 0px 0px 130px;
}
.preloader_pause span {
  position: absolute;
  display: block;
  bottom: -300px;
  left: 350px;
 width: 15px;
  height: 15px;

  border-radius: 10px;
  background: #3498db;
  -webkit-animation: preloader 0s infinite ease-in-out;
          animation: preloader 0s infinite ease-in-out;
}
.preloader_pause span:nth-child(2) {
  left: 390px;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}
.preloader_pause span:nth-child(3) {
  left: 430px;
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
}
.preloader_pause span:nth-child(4) {
  left: 33px;
  -webkit-animation-delay: 600ms;
          animation-delay: 600ms;
}
.preloader_pause span:nth-child(5) {
  left: 44px;
  -webkit-animation-delay: 800ms;
          animation-delay: 800ms;
}
.preloader_pause span:nth-child(6) {
  left: 55px;
  -webkit-animation-delay: 1000ms;
          animation-delay: 1000ms;
}

@-webkit-keyframes preloader {
  0% {
    height: 5px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
  25% {
    height: 30px;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    background: #3498db;
  }
  50%,100% {
    height: 5px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
}

@keyframes preloader_pause {
  0% {
    height: 15px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
  25% {
    height: 60px;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    background: #3498db;
  }
  50%,100% {
    height: 5px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <div  ng-class="statetostartwaves ===0 ? 'preloader_pause waves':(statetostartwaves ===1 ? 'preloader waves' : 'no class')" >
        <span></span>
        <span></span>
        <span></span>
 </div>
 {{statetostartwaves}}
</div>

Hey, thanks for responding. I have corrected my timeout function and also modified my else condition. but the problem is my statetostartwaves' variable is not changing its state to 1 $scope.statetostartwaves=0; console.log('state>',$scope.statetostartwaves); $timeout(function(){ $scope.statetostartwaves=1; },500); console.log('state1>',$scope.statetostartwaves); }]);
@PrashanthSai it's changing, you need to add the second console log inside the timeout function. since javascript asynchronous, it keeps on executing. That's why second console log prints before it execute the timeout function
Thanks again, I am a python developer and a rookie javascript guy. But the answer from pro.mean worked. There is something still not working in your snippet. This worked for me <div class ="waves" ng-class="[{0: 'preloader_pause ', 1 : 'preloader'}[statetostartwaves]]"
thanks for the compliment :D. if this helped make sure to check as the right answer @Prashanth Sai

Collectives™ on Stack Overflow

Calling dynamic classes (with respect to condition) in angular js using ng-class

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related