如何使用 CSS 的对象填充 ng-style

Question

我构建了一个 CSS 对象，我定义了 CSS 属性名称和值。目标是构建一个表单来操纵值并自动为用户直观地更新页面上的 CSS。

除了以一种优雅的方式实际实时设置项目样式外，我已经全部正常工作了。

这里是 link 示例 https://codepen.io/uncommonjoe/pen/KKXyzBp

这是我创建的我正在使用的对象

vm.card = [
        {
            class: "card",
            properties: [
                {
                    name: "background-color",
                    value: "#FFFFFF"
                },
                {
                    name: "border",
                    value: "1px solid #FFFFFF"
                },
                {
                    name: "border-radius",
                    value: "5px"
                },
                {
                    name: "box-shadow",
                    value: "0 0 26px rgb(0 0 0 / 20%)"
                },
                {
                    name: "margin",
                    value: "0"
                },
                {
                    name: "padding",
                    value: "0"
                }
            ]
        }
    ];

在 HTML 中，我使用 ng-repeat 构建表单控件

<div ng-repeat="card in vm.card">
    <b>{{card.class}}</b>
    <div ng-repeat="object in card.properties">
        <label>{{object.name}}</label>
        <input type="text" ng-model="object.value" />
    </div>
</div>

这是项目的例子。如您所见，这不是动态的和可重用的。

 <div class="card" style="width: 18rem;"
    ng-style="{
        'background-color': vm.card[0].properties[0].value,
        'border': vm.card[0].properties[1].value,
        'border-radius': vm.card[0].properties[2].value,
        'box-shadow': vm.card[0].properties[3].value,
        'margin': vm.card[0].properties[4].value,
        'padding': vm.card[0].properties[5].value,
    }">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

我需要一个好方法来做一个 ng-repeat 可以说在 ng-style 中拉动 name 并将其定义为 CSS 属性和 value 作为值。

Answer 1

在你的控制器中定义一个样式器函数，然后从 ng-style 中调用它：

vm.styler=function(props){
    var styles={};
    props.forEach(css=>{
        styles[css.name]=css.value
    })
    return styles;
}

在 ng 风格中：ng-style="vm.styler(vm.cardObj[0].properties)"

如何使用 CSS 的对象填充 ng-style

How to populate ng-style with object of CSS

css

angularjs