ngStyle directive allows you to set CSS style on an HTML element dynamically.
Expression which evals to an object whose keys are CSS style names and values are corresponding values for those CSS keys. Since some CSS style names are not valid keys for an object, they must be quoted.
ng-style="{color: myColor}"
Your code will be:
<div ng-style="{'width':'20px', 'height':'20px', 'margin-top':'10px', 'border':'solid 1px black', 'background-color':'#ff0000'}"></div>
If you want to use scope variables:
<div ng-style="{'background-color': data.backgroundCol}"></div>
Here an example on fiddle that use ngStyle, and below the code with the running snippet:
angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
$scope.items = [{
name: 'Misko',
title: 'Angular creator'
}, {
name: 'Igor',
title: 'Meetup master'
}, {
name: 'Vojta',
title: 'All-around superhero'
}
];
});.pending-delete {
background-color: pink
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl" ng-style="{color: myColor}">
<input type="text" ng-model="myColor" placeholder="enter a color name">
<div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}">
name: {{item.name}}, {{item.title}}
<input type="checkbox" ng-model="item.checked" />
<span ng-show="item.checked"/><span>(will be deleted)</span>
</div>
<p>
<div ng-hide="myColor== 'red'">I will hide if the color is set to 'red'.</div>
</div>