Динамический CSS из JSON для каждого элемента

У меня есть элемент в API, который необходимо отображать динамически, и стиль элемента указан ниже.

"elementStyle": {
              "Width": "100",
              "Height": "100",
              "ThemeSize": "M",
              "TopMargin": "0",
              "LeftMargin": "0",
               "Background" : "#EEEEE",
               font : "roboto"
            },

Каким будет лучший способ сопоставить такие ключи, как Background, с цветом фона, а шрифт - с семейством шрифтов, Topmargin и margin-top.


javascript css angularjs dynamic-css
person Naushad Ahmad    schedule 12.05.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Предполагая, что вы сохранили json в переменной области, например, $scope.myElementStyle вы можете применить стили к элементу dom следующим образом:

<div ng-style="{'background-color':myElementStyle.Background, 'font-family':myElementStyle.font}"></div>
person Markus Kösel    schedule 12.05.2016
comment
мой вопрос связан с тем, как вы знаете, что свойство background-color необходимо применять для фона, потому что у меня каждый ключ является динамическим. - person Naushad Ahmad; 13.05.2016
comment
Извините, но я не могу полностью понять вашу проблему. Было бы лучше, если бы вы могли переименовать свойства в json в соответствии с их эквивалентами css! Я полагаю, что существует слишком много стилей css, чтобы создать индивидуальное сопоставление для вашей цели ... - person Markus Kösel; 15.05.2016