html - 如何在 div:after 中使用 ng-style?
问题描述
我正在使用 Angular 1.x。
这是 jsfiddle 上的代码示例。
如果ctrl.shouldShowDiv2 = false
我不想div2
以其他方式显示(ctrl.shouldShowDiv2 = true
)我想激活box::after
。有没有办法让它与ng-style
或任何其他指令一起工作?
这个答案看起来与我想要的相似,但我无法理解。
谢谢。
解决方案
您可以做的是创建一个使用::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>
推荐阅读
- php - Laravel Faker 未知格式化程序
- endpoint - 在 OpenAPI 规范中,是否有任何行业标准将资源(ResourceDefinitions)与其相应的端点分组?
- amazon-web-services - 将 AMI 从一个区域复制到另一个区域,然后无法 ssh 到新实例
- sql - 重复天数时将持续时间计算为分数
- python - 网页抓取问题
- transition - 使用Barba js,其他脚本不加载
- postgresql - 半年(财政年度)的通用开始和结束日期,PostgreSQL
- php - 在 Laravel 中设置与数据库字段同名的属性返回错误
- r - 从r中矩阵的每一行中减去一个不同的向量
- google-apps-script - 生成时间戳后,在时间戳旁边插入文本