具有角度定义值的嵌入式样式表

Question

我正在为此调查小部件重新使用 HTML/CSS。

CSS 是为固定数量 (5) 的选项（单选按钮）而构建的，但我可以使用 ng-repeat 对其进行动态化，以便它可以根据数据需要容纳 3 到 9 个选项。

CSS 也需要是动态的，以考虑可变数量的选项。

<div class="wrap">
    <div class="widget-wrapper likert-scale-widget" action="">
        <ul class='likert1'>
            <li ng-repeat="option in item.response.options>
                <input type="radio" name="likert" ng-value="option.value">
                <label>{{option.label}}</label>
            </li>
        </ul>
    </div>
</div>

CSS 广泛使用伪类：

div.likert-scale-widget .likert1:before {
    top: 11px;
    left: 9.5%;
    display: block;
    width: 78%;
}

你不能把伪类直接内联，所以我不能这样做：

<div class="likert-scale-widget">
<div class="likert1" style="width:78%">

所以我要做的就是将我的样式嵌入到页面顶部的一个元素中。然后我可以用Angular定位它：

<style>
div.likert-scale-widget .likert1:before {
    top: 11px;
    left: {{ 12 - item.response.options.length*1.1 }}%;
    display: block;
    width: {{ 74 + item.response.options.length }}%;
}
</style>

问题是，这是非常不标准的标记。我的 GUI 讨厌多次使用括号。

有更好的方法吗？

Answer 1

您可以使用ng-style。看起来真的很hackish，但如果你的风格对内容是动态的，那么我想它是合理的。

声明一个变量以获取键值格式的整个样式。

$scope.likerStyle = {
    'top': '11px';
    'left': (12 - item.response.options.length*1.1) + '%'; // '+' automatically stringify this
    'display': 'block';
    'width': (74 + item.response.options.length) +'%';
};

然后在您的标记处使用：

<div class="wrap">
<div class="widget-wrapper likert-scale-widget" action="">
    <ul class='likert1' ng-style='likerStyle'> 
        <li ng-repeat="option in item.response.options>
            <input type="radio" name="likert" ng-value="option.value">
            <label>{{option.label}}</label>
        </li>
    </ul>
</div>