javascript - 禁用按钮和按钮悬停显示(不同的)警报/错误消息，具体取决于 CSS 的状态

Question

<div class="col-md-12">
      
<button type="button" class="btn-submit upload for-hover smooth-hover"
          
ng-click="vm.onUpload($event, index, prod.ProductId)"
               
ngf-select="vm.uploadAttachments($event, $files, $invalidFiles)" 
multiple accept="image/*,.pdf,*.doc,*.docx" 
ngf-capture="'camera'"
 ngf-max-size="5MB" ng-
disabled="prod.Product_Status === ‘A’|| prod.Product_Status === ‘B’ 
|| prod.Product_Status === ‘C’ ">Upload Documents
        
</button>
    
<div class="alert alert-danger alert-fix on-hover col-xs-6 col-sm-6 
col-md-7 col-lg-7" ng-show="prod.Product_Status === ‘A’”>You are in 
A group</div>
        
<div class="alert alert-danger alert-fix on-hover col-xs-6 col-sm-6 
col-md-7 col-lg-7" ng-show="prod.Product_Status === ‘B’”>You are in B 
group</div>
        
<div class="alert alert-danger alert-fix on-hover col-xs-6 col-sm-6 
col-md-7 col-lg-7" ng-show="prod.Product_Status === ‘C’”>You are in C 
group</div>
   
</div>


CSS---->
.on-hover {
  display: none;
}
.for-hover:hover + .on-hover {
  display: inline-block;
}

我有一个上传按钮，它在 ng-disabled 条件下工作正常，它在 Conditions 上的禁用按钮。当我处于某种状态时，我试图显示错误/警报消息。显示一条固定消息工作正常。但我想要根据不同的状态显示不同的消息。它不工作。

Answer 1

您在 ng-disabled 和 ng-show 属性中使用了大引号。例如===‘B’”

将它们更改为直引号，您的代码就可以正常工作了。

angular.module("app", [])
  .controller("controller", function($scope) {
    $scope.prod = {
      Product_Status: "C"
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="controller" class="col-md-12">
  <button type="button" class="btn-submit upload for-hover smooth-hover" ng-click="vm.onUpload($event, index, prod.ProductId)" ngf-select="vm.uploadAttachments($event, $files, $invalidFiles)" multiple accept="image/*,.pdf,*.doc,*.docx" ngf-capture="'camera'"
    ngf-max-size="5MB" ng-disabled="prod.Product_Status === 'A' || prod.Product_Status === 'B' || prod.Product_Status === 'C' ">Upload Documents        
</button>
  <div class="alert alert-danger alert-fix on-hover col-xs-6 col-sm-6 
col-md-7 col-lg-7" ng-show="prod.Product_Status === 'A'">You are in A group</div>
  <div class=" alert alert-danger alert-fix on-hover col-xs-6 col-sm-6 col-md-7 col-lg-7 " ng-show="prod.Product_Status==='B'">You are in B group
  </div>
  <div class="alert alert-danger alert-fix on-hover col-xs-6 col-sm-6 col-md-7 col-lg-7 " ng-show="prod.Product_Status==='C'">You are in C group
  </div>
</div>