Scribd
Upload
20 views4 pages

Style Directivies

The ng-style directive sets styles for HTML elements by binding an expression that returns an object with key-value pairs of CSS properties and values. The example shows using ng-style to set the color, background-color, font-size, and padding styles on an h1 element from an object defined in the controller. Controllers are used to control data flow and accept a $scope parameter to reference the application. Properties, methods, and external files can be used in controllers.

Uploaded by

vinikshashree
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views4 pages

Style Directivies

The ng-style directive sets styles for HTML elements by binding an expression that returns an object with key-value pairs of CSS properties and values. The example shows using ng-style to set the color, background-color, font-size, and padding styles on an h1 element from an object defined in the controller. Controllers are used to control data flow and accept a $scope parameter to reference the application. Properties, methods, and external files can be used in controllers.

Uploaded by

vinikshashree
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

STYLE DIRECTIVIES

The ng-style directives is used to set the style for


the HTML elements. The value assigned to the ng-style
must be the object or an expression returning the
object. Inside this object the CSS properties and values
are given as key-value pairs.

SYNTAX:
<element ng-style="expression"></element>
Angular JS Document [styleDemo.html]
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-style="myObj">Welcome</h1>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.myObj = {
"color" : "black",
"background-color" : "khaki",
"font-size" : "60px",
"padding" : "50px”
}
});
</script>
</body>
Output:
The style parameters are set inside the controller
function.

Controllers:
• The use of controller in AngularJS is to control the
flow of data . The ng-controller directives is used
for this purpose.
• The controller is Javscript object containg
properties and functions.
• Each controller accept $scope as a parameter
which refers to the application that controller is
to control.
• We can use controller with properties, methods
and external files.
Example program,
<div ng-app="myApp" ng-controller="personCtrl">
FirstName: <input type="text"ng-model="firstName">
<br>
LastName: <input type="text" ng-model="lastName>
<br>
<br>
FullName: {{fullName()}}
</div>
<script>
var app=angular.module('myApp',[]);
app.controller('personCtrl', function($scope){
$scope.firstName = "John"; properties
$scope.lastName = "Doe";
$scope.fullName = function(){ Methods
return $scope.firstName + " " $scope.lastName;
};
});
</script>
output:

Script explanation:
In above script,
1.Two directives , div-app and div-controllers are
defined with attribute names ”MyApp” and
“MyController”.
2.The MyController function is a JavaScript function
that Angular JS invokes using the $scope object.
3.within the controller, two properties, ’FirstName’ and
’lastName’ are created and assigned values ‘John’ and
‘Doe’ using the $scope object.
4.The ng-model binds these input fields to the
controller properties.
5.The two properties firstName and lastName are
defined.Along with them , a method named fullName()
is invoked.
6.This function returns the string containing values to
the properties.
7.This function is then bounded to HTML.
Controller with external file:
Example for external files:
angular.module('myApp', []).controller('namesCtrl',
function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});

You might also like