我已經構建了一個 CSS 物件，我已經定義了 CSS 屬性名稱和值。目標是構建一個表單來操作值并自動為用戶直觀地更新頁面上的 CSS。
除了以一種優雅的方式實時實際設計專案之外，我已經完成了所有作業。
這是示例的鏈接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"
}
]
}
];
在我ng-repeat用來構建表單控制元件的 HTML 中
<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和 pullname并將其定義為 CSS 屬性和value值。
uj5u.com熱心網友回復：
在你的控制器中定義一個樣式器函式，然后從 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)"
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/396438.html