This is in continuation of my last article, whose link is given below-

Let’s move forward with other AngularJS Directives, mentioned below-

  1. ng-blur

    This directive tracks blur event. Whenever the user moves out of associated HTML element, this directive executes the provided expression. This directive does not have any effect on the behavior of HTML onblur event. Both ng-blur directive and onblur event shall be executed.

    Syntax
    1. <element ng-blur=”expression”></element>
    ng-blur supports <a>, <input>, <select>, <textarea> and window object.

    Let’s understand it, using an example, given below-



    Output - On page load, count will be printed as 0. We’ll click inside the textbox.



    Now, on pressing the tab button, we can see the count is increased by 1, as shown below-



    If we repeat the two steps, mentioned above, we can see increment in count variable by 1 every time we leave the focus from textbox.

  2. ng-change

    It specifies an expression, which is evaluated when the value of associated HTML element changes. This event is triggered by every change in the value. It does not wait till the time of the final change or at the time of losing focus of the associated HTML element.

    This is supported by <input>, <select> and <textarea> HTML controls.

    It does not override the behavior of onchange event. Both ng-change and onchange event will be executed.

    Note - ng-model is mandatory to be used with ng-change

    Let’s see the example, given below-



    It looks like the example, mentioned above, will be executed properly. There is something missing i.e. ng-model. Therefore it will not run. Now, let’s see a correct example, given below-

    Output



  3. ng-checked

    This directive can only be applied with HTML input element of checkbox and radio type.

    Syntax



    Expression’s value can be any one of following-

    • true - HTML control will always be selected.
    • false - HTML control will never be selected.
    • Any value equal to the value of ng-model in other checkbox or radio type HTML input element : In this case, if the source control is selected, all other referring controls will also be selected.


If Check all is checked, other two checkboxes shall be selected.

Other AngularJS Directives