about 9 years ago
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>
<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:-
In Js:-
4.ng-init - Initializes AngularJs app. variables. Usage :-
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>
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):-
7.ng-src - It is used to dynamically bind AngularJS variables to the src attribute. Usage :-
8.ng-style - When you need to set CSS style on HTML elements with conditions,this attribute is used. Usage:-
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>
<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>
<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)
<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:-
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>
<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>
Can you help out the community by solving one of the following Javascript problems?
Do activity (Answer, Blog) > Earn Rep Points > Improve Rank > Get more opportunities to work and get paid!
For more topics, questions and answers, please visit the Tech Q&A page.
0 Comment(s)