如何使用ng-class在css中對僞類進行更改？

我有一個自定義複選框，我正在使用：複選框的標籤之前。現在我有一個條件，我希望將複選框的邊框顏色更改爲紅色。我不知道我應該怎麼做呢？請看以下類和HTML結構：如何使用ng-class在css中對僞類進行更改？

<input id="tAndC" name="tAndC" type="checkbox" class="paddingLeft" ng-checked= "card.acceptTC" required ng-model="card.acceptTC" ng-change="revertFocusOutTC()" ng-blur="" > 

        <label for="tAndC" class="checkbox1 chkSmall chkTAndC marginLeft" ng-class="focusedOutTC?'checkboxErr':''">

CSS：

.checkbox1:before { 
    content: ""; 
    display: inline-block; 
    width: 24px; 
    height: 24px; 
    vertical-align: middle; 
    background-color: transparent; 
    color: #818181; 
    text-align: center; 
    border-color: #818181; 
    border-radius: 2px; 
    border-width: 1px; 
    border-style: solid; 
    float: left; 
}

來源

2016-01-19 Jyotirmoy Pan

請嘗試以下方法這個角度ng-class屬性：

ng-class="{ checkboxErr : !!focusedOutTC }"

說明： checkboxErr只有在Boolean表示的情況下才能安裝類名稱focusedOutTC的發送將等於true。

來源

2016-01-19 21:42:26

把類的輸入，而不是，如果你想使用納克級，你必須堅持到納克級的語法，例如相應

<input ... class="{{ focusedOutTC ? 'checkboxErr':'' }}" ... /> 

.checkbox1:before { 
    ... 

    &.checkboxErr { 
     border: 1px solid red !important; 
    } 

}

或者延長你的CSS

ng-class="{ 'classname': condition }"

來源

2016-01-19 21:43:57

想到兩件事情。你可以這樣做：

.checkbox1:before { 
    content: ""; 
    display: inline-block; 
    width: 24px; 
    height: 24px; 
    vertical-align: middle; 
    background-color: transparent; 
    color: #818181; 
    text-align: center;  
    border-radius: 2px; 
    border-width: 1px; 
    border-style: solid; 
    float: left; 
} 
.grayBorder{ 
    border-color: #818181; 
} 
.redBorder{ 
    border-color: red; 
} 
        <label for="tAndC" class="checkbox1 chkSmall chkTAndC marginLeft" ng-class="focusedOutTC?'grayBorder ':'redBorder">

或者你總是可以做

<label id="label1" for="tAndC" class="checkbox1 chkSmall chkTAndC marginLeft" ng-class="focusedOutTC?'grayBorder ':'redBorder">

...在JS

angular.element("#label1").addClass("redBorder"); 
angular.element("#label1").removeClass("redBorder");

你也可以做angular.element（「＃ID」）的CSS （「邊框顏色：紅色」）;

來源

2016-01-19 21:44:35 MichaelWClark

使用jquery命令不是一個很好的提示，我強烈建議儘可能避免這種情況，如果沒有的話。這肯定不是addClass，removeClass或.css或任何jquery選擇器的情況。如果你想在這種情況下使用jQuery，你不應該使用角度 –

是的，這傢伙是對的。我仍然是一個新人，試圖訓練自己去思考。我提供的CSS可能會有所幫助，但是使用ng-class而不是jQuery。 – MichaelWClark

如何使用ng-class在css中對僞類進行更改？

回答

相關問題