JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app='yourModule'>
<select dynamic-attributes='topology'></select>
</div>
CSS
select#topology_id {
border: 10px solid blue;
}
select.topology_class1 {
margin: 50px;
}
select.topology_class2 {
padding: 20px;
}
select[disabled] {
opacity: 0.5;
}
JavaScript
var yourModule = angular.module('yourModule', []);
// The dynamic attributes directive
yourModule.directive('dynamicAttributes', ['jsonData', function (jsonData) {
return function (scope, element, attrs) {
// Get the attribute data from a service.
var attributes = jsonData.get(attrs.dynamicAttributes);
// Add each of the attributes to the element.
attributes.forEach(function (attribute) {
element.attr(attribute.name, attribute.value);
});
}
}]);
// The jsonData service
yourModule.service('jsonData', function () {
// This would really come from the server.
var json = {
"topology": [{
"name": "id",
"value": "topology_id"
}, {
"name": "class",
"value": "topology_class1 topology_class2"
}, {
"name": "disabled",
"value": "disabled"
}]
};
// Public API
return {
get: function (name) {
return json[name];
}
};
});