Tutorial by Examples

This example demonstrates how Angular expressions are evaluated when using type="text" and type="number" for the input element. Consider the following controller and view: Controller var app = angular.module('app', []); app.controller('ctrl', function($scope) { $sco...

ng-repeat is a built in directive in Angular which lets you iterate an array or an object and gives you the ability to repeat an element once for each item in the collection. ng-repeat an array <ul> <li ng-repeat="item in itemCollection"> {{item.Name}} </...

The ng-show directive shows or hides the HTML element based on if the expression passed to it is true or false. If the value of the expression is falsy then it will hide. If it is truthy then it will show. The ng-hide directive is similar. However, if the value is falsy it will show the HTML elemen...

ngOptions is a directive that simplifies the creation of a html dropdown box for the selection of an item from an array that will be stored in a model. The ngOptions attribute is used to dynamically generate a list of <option> elements for the <select> element using the array or object o...

With ng-model you can bind a variable to any type of input field. You can display the variable using double curly braces, eg {{myAge}}. <input type="text" ng-model="myName"> <p>{{myName}}</p> As you type in the input field or change it in any way you will s...

Let's assume that you need to show the status of a user and you have several possible CSS classes that could be used. Angular makes it very easy to choose from a list of several possible classes which allow you to specify an object list that include conditionals. Angular is able to use the correct...

ng-if is a directive similar to ng-show but inserts or removes the element from the DOM instead of simply hiding it. Angular 1.1.5 introduced ng-If directive. You can Use ng-if directive above 1.1.5 versions. This is useful because Angular will not process digests for elements inside a removed ng-if...

The ng-mouseenter and ng-mouseleave directives are useful to run events and apply CSS styling when you hover into or out of your DOM elements. The ng-mouseenter directive runs an expression one a mouse enter event (when the user enters his mouse pointer over the DOM element this directive resides i...

This directive is useful to limit input events based on certain existing conditions. The ng-disabled directive accepts and expression that should evaluate to either a truthy or a falsy values. ng-disabled is used to conditionally apply the disabled attribute on an input element. HTML <input t...

The ng-dblclick directive is useful when you want to bind a double-click event into your DOM elements. This directive accepts an expression HTML <input type="number" ng-model="num = num + 1" ng-init="num=0"> <button ng-dblclick="num++">Double...

ng-app Sets the AngularJS section. ng-init Sets a default variable value. ng-bind Alternative to {{ }} template. ng-bind-template Binds multiple expressions to the view. ng-non-bindable States that the data isn't bindable. ng-bind-html Binds inner HTML property of an HTML element....

The ng-click directive attaches a click event to a DOM element. The ng-click directive allows you to specify custom behavior when an element of DOM is clicked. It is useful when you want to attach click events on buttons and handle them at your controller. This directive accepts an expression wit...

The ng-required adds or removes the required validation attribute on an element, which in turn will enable and disable the require validation key for the input. It is used to optionally define if an input element is required to have a non-empty value. The directive is helpful when designing validat...

ng-model-options allows to change the default behavior of ng-model, this directive allows to register events that will fire when the ng-model is updated and to attach a debounce effect. This directive accepts an expression that will evaluate to a definition object or a reference to a scope value. ...

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. - View source HTML <div ng-cloak> <h1>Hello {{ name }}</h1> </div> ngCloak can be appl...

ng-include allows you to delegate the control of one part of the page to a specific controller. You may want to do this because the complexity of that component is becoming such that you want to encapsulate all the logic in a dedicated controller. An example is: <div ng-include src=&q...

Using Angular markup like {{hash}} in a src attribute doesn't work right. The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. ng-src directive overrides the original src attribute for the image tag element and solves the problem ...

The ng-pattern directive accepts an expression that evaluates to a regular expression pattern and uses that pattern to validate a textual input. Example: Lets say we want an <input> element to become valid when it's value (ng-model) is a valid IP address. Template: <input type="tex...

Mostly used under ng-repeat ngValue is useful when dynamically generating lists of radio buttons using ngRepeat <script> angular.module('valueExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.names = ['pizza', 'unicorns', 'robots']; ...

The ngCopy directive specifies behavior to be run on a copy event. Prevent a user from copying data <p ng-copy="blockCopy($event)">This paragraph cannot be copied</p> In the controller $scope.blockCopy = function(event) { event.preventDefault(); console.log(&quo...