Question

我的消息为“准备扫描”，如果扫描成功，我希望背景颜色为绿色，如果没有则为红色，那么我需要它回到第一条消息“准备扫描”，现在我的它保持在“扫描成功”状态，并且不会返回到我原来的消息。

    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 1

除非你重置变量，否则它不会改变！使用超时尝试此操作。

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();
 }

}

为了设置背景颜色，基于scanMsg在你的html中使用它

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

在你的css中定义它

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

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

我想更改状态消息，如果成功则显示成功然后返回到我的第一条消息

1 个答案: