A Directive helps us to control the rendering of the HTML inside an AngularJS application. It makes AngularJS responsive. It adds functionality to the application. AngularJS has its built in set of directives. Some commonly used directives are as follows :-
1.ng-class -It is used to dynamically set the CSS class on HTML. It is very simple you just need to bind a variable into the directive “ng-class” and change it from the controller.
2.ng-repeat -ng-repeat is used to iterate over the properties of an object. It instantiates or clones a template once for each item in a collection. Usage :-
<li ng-repeat="name in names">
{{ name }}
</li>
<script>
var app = angular.module("app", []);
app.controller("MyCtrl", function ($scope) {
$scope.names = [mango, grapes, papaya];
});
</script>
3.ng-app - It will load the dependencies and the module. Usage:-
<body ng-app="mainApp">
In Js:-
var myapp = angular.module('mainApp', []);
4.ng-init - Initializes AngularJs app. variables. Usage :-
<div ng-init =expression></div>
5.ng-model - It binds the value of AngularJs app. data to HTML input controls. Usage:-
Name: <input ng-model="name">
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = Munmun Sarkar;
});
</script>
6.ng-bind - We bind an expression with this attribute that replaces the HTML text content with the value of this expression and whenever the expression changes, the text content also gets updated. Its usage(as an attribute):-
<span ng-bind=expression></span>
7.ng-src - It is used to dynamically bind AngularJS variables to the src attribute. Usage :-
<IMG
ng-src="template">
...
</IMG>
8.ng-style - When you need to set CSS style on HTML elements with conditions,this attribute is used. Usage:-
<div ng-style="{'padding': '7px 0'}" </div>
9.ng-switch - This directive is used to swap or show/hide the HTML elements according to the conditions. We can use ng-switch when we want to display the elements if it gets a match and ng-switch-default if none of the element gets a match. Usage :-
<element ng-switch="expression">
<element ng-switch-when="value"></element>
<element ng-switch-when="value"></element>
<element ng-switch-when="value"></element>
<element ng-switch-default></element>
</element>
10. ng-if - This directive is used when we want to display the elements based on the condition. The condition evaluates to either true or false. The element is displayed(or added) if it evaluates to true. Usage:-
<div ng-if=checked>I am visible</div>
<script>
var app = angular.module("app", []);
app.controller("MyCtrl", function ($scope) {
$scope.checked = true; // The above div will be displayed
});
</script>
11.ng-show -This directive is used to show or hide the HTML element based on the expression(or condition). That element is displayed or hidden by the addition of .ng-hide CSS class to that element. Usage:-
<div ng-show="myValue"></div> // when $scope.myValue is true (element is visible)
<div ng-show="myValue" class="ng-hide"></div> //when $scope.myValue is false (element is hidden)
12.ng-click - This directive is used to execute a method or function when the element is clicked. Usage:-
<button class="btn ng-click="prevBtn()></button>
13.ng-options - This directive is used to generate a list of option elements in the select elements dynamically. It basically uses an array to fill the drop down list. Usage:-
<select ng-model=FirstEgSelected ng-options="item for item in movies></select>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.movies = [Wazir, Airlift, Baby];
});
</script>
0 Comment(s)