如何将 ng 样式与 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>