Hello everyone, I am going to share the code sample for how to use the ng-style in angularjs. The ng-style is used to handle the css property just like css style. Here we can use css style name and its value with respect to your choices.
Go to online live demo click to http://embed.plnkr.co/20TBCQ/preview
In the below example, I handle the a progress bar with green color out of your 100% gray color data usage.
The css code sample as given below
<style>
.yelloColor {
background-color: gray;
}
.meterColor {
background-color: green;
}
</style>
The Angular code sample as given below
<script>
var app = angular.module('ngStyleApp', []);
app.controller('ngStyleCtrl', function ($scope) {
$scope.bar = "48%";
});
</script>
The HTML code sample as given below
<div ng-app="ngStyleApp" ng-controller="ngStyleCtrl">
<div class="yelloColor">
<div class="meterColor" ng-style="{'width':bar}">
<h4> {{bar}} DATA USED OF 100%</h4>
</div>
</div>
</div>
The Full Live demo code sample as given below
<!DOCTYPE html>
<html>
<head>
<style>
.yelloColor {
background-color: gray;
}
.meterColor {
background-color: green;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
var app = angular.module('ngStyleApp', []);
app.controller('ngStyleCtrl', function ($scope) {
$scope.bar = "48%";
});
</script>
</head>
<body ng-app="ngStyleApp" ng-controller="ngStyleCtrl">
<div class="yelloColor">
<div class="meterColor" ng-style="{'width':bar}">
<h4> {{bar}} DATA USED OF 100%</h4>
</div>
</div>
</body>
</html>
The Live Result,
The Live Result,
Thank you!
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|