Как внести изменения в псевдокласс в css с помощью ng-class?

Question

Как внести изменения в псевдокласс в css с помощью ng-class?

1

У меня есть собственный флажок, который я ставил с использованием: раньше на ярлыке флажка. Теперь у меня есть условие, на основе которого я хочу изменить цвет рамки флажка как красный. Я не уверен, как я должен делать то же самое? Ниже вы найдете структуру класса и html:

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

Jyotirmoy Pan 19 янв. 2016, в 23:21

Источник

Теги:

html

angularjs

css

3 ответа

Ещё вопросы

Peter Janin · Answer 1 · 2016-01-19T20-39-00.000Z

Попробуйте этот угловой атрибут ng-class следующим образом:

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

Объяснение: имя класса checkboxErr будет установлено, только если Boolean представление focusedOutTC будет равно true.

Patrick Kelleter · Answer 2 · 2016-01-19T19-57-00.000Z

поместите класс на вход вместо этого и расширьте свой CSS

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

.checkbox1:before {
   ...

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

}

альтернативно, если вы хотите использовать ng-класс, вы должны придерживаться синтаксиса ng-класса, например

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

MichaelWClark · Answer 3 · 2016-01-19T19-30-00.000Z

на ум приходят две вещи. Вы можете сделать:

.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 ("border-color: red");

использование команд jquery не очень хороший совет, я настоятельно рекомендую избегать этого как можно чаще, если не когда-либо. и это, конечно, не ситуация для addClass, removeClass или .css или любого селектора jquery вообще. если вы хотите использовать jquery в таких ситуациях, вы не должны использовать angular вообще
Да, этот парень прав. Я все еще новичок в угловых и пытаюсь научиться думать. Предоставленный мною CSS может помочь, но используйте jg-класс, а не jQuery.