MohdO MohdO - 5 months ago 49
AngularJS Question

I want to change a status message, show success if success then return to my first message

I have my message as "Ready to Scan", if the scan success I want the background color to be green, and red if not then I need it to come back to the first message "Ready To Scan", mine now it stays on Scan Success and it doesn't return back to my original message.

scanMsg = "Ready To Scan"
if (data.status == "success") {
scanMsg = "Scan Success";
}else {
scanMsg = "Failed";
}
}

<div id="divScanMsg" class="cssTitleCenter cssFontS cssCurEdges pull-right" ng-class="'bg-green':vm.scanMsg==='Scan Success', 'bg-red': scanMsg === 'Failed'" style="height: 30vh; width: 50%; overflow-y:scroll; border-style:double; border-width:25px;">{{ vm.scanMsg }}</div>

Answer

Unless you reset the variable, its not gonna change! Try this using timeout.

function resetScanMsg(){
 $timeout(function(){
  $scope.scanMsg = 'Ready To Scan';
}, 2000);

$scope.someFn = function(){

 $scope.scanMsg = "Ready To Scan";

 if (data.status == "success") {
  $scope.scanMsg = "Scan Success";
  resetScanMsg();
 }else {
  $scope.scanMsg = "Failed";
  resetScanMsg();
 }

}

And for setting the background color, based on scanMsg use this in your html

<div ng-class="{'bg-red': scanMsg === 'Failed', 'bg-green': scanMsg === 'Scan Success'}"></div>

And define this in your css

.bg-red{
  background-color: red;
}

.bg-green{
  background-color: green;
 }