Description :
In this on button click we can set the style and style will assign to the ng-style directive which will implemented on text.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app>
<div>
<button ng-click="style={color:'Red'}">Set Color</button>
<button ng-click="style={backgroundColor:'yellow'}">Set Background Color</button>
<button ng-click="style={}">reset</button><br />
<span ng-style="style">Sample text</span>
</div>
</body>
</html>
Description :
In this example write the color name in the textbox and the entered color will assign to the ng-style directive and apply to the text displayed.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style type="text/css">
.bg-color {
background-color: orange;
}
</style>
</head>
<body ng-app="app">
<div ng-controller="controllerName">
<input type="text" ng-model="color" placeholder="Enter any color." />
<p ng-repeat="record in records" ng-style="{color:color}">
<span class="bg-color"> Name: {{record.name}}</span>
</p>
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.records = [{ name: 'Java Script' }, { name: 'AngularJS' }, { name: 'Jquery' }, { name: 'Bootstrap' }];
}]);
</script>
</body>
</html>
Description :
In this example we have a random collection with color and x,y values. The color is set as background color and value of x assign to the css property 'left' and value of y assign to css property 'top'. Each time when you refresh the page new values will set.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style type="text/css">
.circle {
display: block;
position: absolute;
height: 20px;
width: 20px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
</style>
</head>
<body ng-app="app">
<div ng-controller="controllerName">
<div ng-repeat="p in collection">
<div class="circle" ng-style="{ 'backgroundColor':p.color, 'left':p.x+'px', 'top':p.y+'px' }">
</div>
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.collection = [];
for (var i = 0; i < 50; i++) {
var color = Math.floor(Math.random() * 999 + 110);
color = 'skyblue';
$scope.collection.push({
x: Math.min(1180, Math.max(40, (Math.random() * 1160))),
y: Math.min(380, Math.max(20, (Math.random() * 380))),
color: color
})
};
}]);
</script>
</body>
</html>
Description :
Ng-repeat display the circles of different colors using boxClass and colors take from array of object colorBg.The color of circles continuously changes due to updateArray function that is call by $interval.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style type="text/css">
.boxClass {
width: 50px;
height: 50px;
}
</style>
</head>
<body ng-app="app">
<div ng-controller="controllerName">
<table>
<tr>
<td ng-repeat="obj in colorBg" class="boxClass" style="border-radius: 30px; background: {{obj.color}}"></td>
</tr>
</table>
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', '$interval', function ($scope, $interval) {
$scope.colorBg = [{ color: "tomato" }, { color: "maroon" }, { color: "blue" }, { color: "red" }, { color: "yellow" }, { color: "green" }];
$scope.colorBg1 = [{ color: "tomato" }, { color: "maroon" }, { color: "blue" }, { color: "red" }, { color: "yellow" }, { color: "green" }];
$scope.updateArray = function () {
var Arr = $scope.colorBg.splice(0, 1);
$scope.colorBg.push(Arr[0]);
};
$scope.updateArray1 = function () {
for (var i = $scope.colorBg1.length-1; i >0 ; i--) {
var Arr = $scope.colorBg1.splice(0,1);
$scope.colorBg1.push(Arr[0])
}
};
$interval($scope.updateArray, 300);
}]);
</script>
</body>
</html>
Description :
Ng-repeat display the squares of different colors using boxClass and colors take from array of object colorBg.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style type="text/css">
.boxClass {
width: 50px;
height: 50px;
}
</style>
</head>
<body ng-app="app">
<div ng-controller="controllerName">
<table>
<tr>
<td ng-repeat="obj in colorBg" class="boxClass" style="background: {{obj.color}}"></td>
</tr>
</table>
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', '$interval', function ($scope, $interval) {
$scope.colorBg = [{ color: "maroon" }, { color: "magenta" }, { color: "tomato" }, { color: "red" }, { color: "green" }, { color: "yellow" }];
}]);
</script>
</body>
</html>
Description :
In this example of Ng-Style, We have a dropdown with values ng-model="size" that will give the height and width for the image. Whatever selection will be made by the user that will be applied to the image.
See the code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
<div ng-controller="myController">
<div class="row text-center">
<div class="col-md-12">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<h4>Image Size</h4>
<select class="form-control" ng-model="size" ng-init="size='100'">
<option value="100">100 X 100</option>
<option value="200">200 X 200</option>
<option value="300">300 X 300</option>
<option value="400">400 X 400</option>
<option value="500">500 X 500</option>
</select>
</div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-12">
<img ng-style="style" src="http://learnit.visrosoftware.com/datafiles/enter4.jpg" />
</div>
</div>
</div>
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('myController', ['$scope', function ($scope) {
$scope.$watch('size', function (newVal, oldVal) {
$scope.style = { 'height': newVal + 'px', 'width': newVal + 'px' };
});
}]);
</script>
</body>
</html>
Description :
In this example of Ng-Style, Clicking on Run button will apply the animation using style or you can say CSS. See the output:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<button class="btn btn-success"
ng-click="style1={'margin-left':'500px','background-color':'lightgreen', 'transition':'all 5s ease-out'};
style2={'margin-left':'400px','background-color':'lightblue','transition':'all 5s ease-out'};
style3={'margin-left':'300px','background-color':'lightred','transition':'all 5s ease-out'};
style4={'margin-left':'200px','background-color':'lightmaroon','transition':'all 5s ease-out'}">
Run
</button>
</div>
</div>
<div class="row text-center">
<div class="col-md-12">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div ng-style="style1" style="height:100px;width:100px;background-color:tomato;"></div>
<div ng-style="style2" style="height:100px;width:100px;background-color:magenta;"></div>
<div ng-style="style3" style="height:100px;width:100px;background-color:blue;"></div>
<div ng-style="style4" style="height:100px;width:100px;background-color:green;"></div>
</div>
<div class="col-md-2"></div>
</div>
<br />
</div>
</div>
</div>
</div>
</div>
</body>
</html>