How to change CSS when it's ng-disabled?

后端 未结 2 1551
北海茫月
北海茫月 2021-02-12 08:24

I have this button:



        
相关标签:
2条回答
  • 2021-02-12 08:38

    What Toress answered should work fine but you don't need the help of AngularJS here at all (a native implementation & usage is always best).

    You can make use of CSS3 since you already have a class on it. Example:

    input.save-changes {
        /* some style when the element is active */
    }
    
    input.save-changes[disabled] {
        /* styles when the element is disabled */
        background-color: #ffffd;
    }
    

    Edit: You can immediately test it on this page of StackOverflow. Just inspect the blue button element and put the disabled attribute and see it's CSS.

    .save-changes {
      background-color: red;
      padding: 7px 13px;
      color: white;
      border: 1px solid red;
      font-weight: bold;
    }
    .save-changes[disabled] {
      background-color: #FF85A1
    }
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    
    <div ng-app ng-init="PayoutEnabled = true">
      <a href="#" ng-click="PayoutEnabled = !PayoutEnabled">
      {{PayoutEnabled ? 'Disable' : 'Enable'}} the below button</a>
      <br>
      <br>
    
      <input class="save-changes" type="submit" value="PAYOUT" ng-disabled="PayoutEnabled == false" />
    </div>

    0 讨论(0)
  • 2021-02-12 08:38

    use ng-class

    <input type="submit" value="@Translator.Translate("PAYOUT")" class="btn-block 
    secondary-button save-changes padding-8" ng-disabled="PayoutEnabled==false" 
    ng-click="PayOut()" ng-class="{'diabled-class': !PayoutEnabled}" />
    

    this will add css class diabled-class to the input when PayoutEnabled is false (!PayoutEnabled is true).

    0 讨论(0)
提交回复
热议问题