Как мне использовать ng-style с div: after?

Question

Я использую Angular 1.x.

Вот пример кода на jsfiddle.

Если ctrl.shouldShowDiv2 = false Я не хочу показывать div2, иначе (ctrl.shouldShowDiv2 = true) Я хочу активировать box::after. Есть ли способ заставить его работать с ng-style или любой другой директивой?

Этот ответ выглядит так, как я хочу, но я не мог этого понять.

Спасибо.

Answer 1

Что вы можете сделать, это создать отдельный класс, для которого вы используете селектор ::after.Затем вы переключаете этот класс, используя ваш ctrl.shouldShowDiv2.Вот пример:

angular.module('app', []);

.box {
  height: 150px;
  width: 200px;
  overflow: hidden;
  position: relative;
  background: tomato;
}

.box-xtra::after {
  content: "div2";
  width: 100px;
  height: 20px;
  position: absolute;
  top: 10px;
  left: -30px;
  transform: rotate(-45deg);
  background-color: white;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<div ng-app="app">
  <div style="margin-bottom: 10px;">
    <label>Show div2 <input type="checkbox" ng-model="ctrl.shouldShowDiv2" /></label>
  </div>
  <div class="box" ng-class="{'box-xtra': ctrl.shouldShowDiv2}"></div>
</div>