Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Custom Filter in Angular JS

Posted in Angular JS

To register a filter you need to call the function angular.module().filter(). The first argument is the name of the filter. The second argument is the filter
factory function. If your filter has dependencies, you can list those as arguments in this function.

Syntax:

custom-filter-angularjs

The factory function returns an anonymous function i.e function with no name or so called as self executing function. This anonymous function accepts one argument which is input to the filter. Second argument is optional it depends on filter functionality. If you want to filter objects from an array then the second parameter can be an array.

Example:

The example metioned below is for a custom filter which reverse the input string.

   var myApp = angular.module("myApp", []);
   myApp.filter("reverse", function() {
    return function(input) {
        if (input !== undefined) {
            return split("").reverse().join("");
        }
    };
   });

   <div>{{ firstname | reverse  }}</div>

The above filter first checks for the input is undefined or not otherwise the filter throws an error on page load. It returns an revers of firstname using reverse and join javascript functions.

Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Built in Angular JS Directives

Posted in Angular JS, Javascript

HTML 5 provides flexibility to create custom tags and attributes. Angular use the same HTML 5 concept to provide additional functionality using these custom tags and attributes. Angular JS has built in directives listed as below.

  • ng-app: Declares the root element of an Angular JS application, under which directives can be used to declare bindings and define behavior.
  • ng-bind: Sets the text of a DOM element to the value of an expression. For example, <span ng-bind=”name”></span> will display the value of ‘name’ inside the span element. Any changes to the variable ‘name’ in the application’s scope are reflected instantly in the DOM.
  • ng-model: Establishes a two-way data binding between the view and the scope. Mostly used with form controls such as Textbox, select dropdown, checkbox, radio button etc.
  • ng-class: Allows class attributes to be dynamically loaded.

     <div ng-class="{'classname': expression}"> ... >/div> 
  • ng-controller: Specifies a JavaScript controller that evaluates HTML expressions.
  • ng-show & ng-hide: Conditionally show or hide an element, depending on the value of a boolean expression. Show and hide is achieved by setting the CSS display style.
  • ng-switch: Conditionally instantiate one template from a set of choices, depending on the value of a selection expression.
  • ng-view: The base directive responsible for handling routes that resolve JSON before rendering templates driven by specified controllers.
  • ng-if: Basic if statement directive that allow to show the following element if the conditions are true. When the condition is false, the element is removed from the DOM. When true, a clone of the compiled element is re-inserted.
  • ng-disabled: Add HTML 5 “disabled” attribute based on the condition to disable any HTML element.
  • ng-options: The ng-options directive fills a <select> element with <options>.

Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

$rootScope in Angular JS

Posted in Angular JS

rootscope
$rootScope refers to an object which is accessible from everywhere of the application. You can think $rootScope as global variable which can be accessible in all controllers, services, directives. The $rootScope object has a function called $new() that’s used to create child scopes.

Angular JS finds ng-app and therefore creates a $rootScope object. Next, while traversing the DOM, Angular JS encounters another ng-controller directive which points to “myController”. Now, it creates another child scope using $rootScope.$new() called $scope.

Injecting rootScope in a controller:
rootscope

Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

Multiple ng-class in angular JS

Posted in Angular JS

The ng-class directive is used every time you need to dynamically apply a class to an element by providing the name of the class in a data-binding expression. We can add multiple classes based on the multiple conditions in angular JS.

Here is the example demonstrating adding multiple ng-class directive:

<div ng-class="{'class1': expression1,'class2':expression2}"> ... </div>

Add class using ternary operator:

   <div ng-class="expression?'className1':'className2'"> ... </div>

For example, if you want to add active class to your menu when menu button is clicked & toggle class when menu button is clicked again then refer example below.

   <div ng-class="menuActive?'active':''"> ... </div>

In above case, menuActive is a scope variable & it is toggled when menu button is clicked. When menuActive is clicked active class is added to the menu & when it is clicked again active class is removed. It is very similar to JQuery addClass & removeClass methods.

Web development blog for Html, CSS, javascript, JQuery developers. At Kodecrash you will find best solution for complex problems.

ng-options in Angular JS

Posted in Angular JS

ng-

Angular JS provides ng-options directive to bind HTML to select dropdown with options. With ng-options use ng-model to store selected options in dropdown. Here is an example. Angular controller has collection of authors scope variable.

var myApp = angular.module('myApp');
myApp.controller('myCtrl', ['$scope', function($scope){
      $scope.authors=[
                {
                    id:0,
                    name:"John Daniel",
                    age:"34",
                    books:[
                        {
                                 name:"Fundamentals of Chemistry",
                                 publishedDate:"07-23-2014"
                        },{
                                 name:"Train Your Brain",
                                 publishedDate:"7-03-2016"
                        },
                        {
                                name:"Business Economics",
                                publishedDate:"12-12-2015"
                        }
                    ]
                
                },{
                        id:1,
                        name:"David Manthon",
                        age:"57",
                        books:[
                            {
                                name:"Principles of Algebra",
                                publishedDate:"11-01-2013"
                            },{
                                name:"Think and Grow",
                                publishedDate:"09-12-2015"
                            },{
                                name:"Finance and Marketing",
                                publishedDate:"11-13-2012"
                            },
                            {
                                name:"The Art Of War",
                                publishedDate:"06-05-2011"
                            }
                    ]

                },{
                        id:2,
                        name:"Melisa Bosch",
                        age:"39",
                        books:[
                            {
                                name:"Java for Beginners",
                                publishedDate:"10-10-2012"
                            },
                            {
                                name:"Stay Hungry Stay Foolish",
                                publishedDate:"08-11-2012"
                            }
                      ]
                },
                {
                        id:3,
                        name:"Simeck Volja",
                        age:"42",
                        books:[
                            {
                                name:"Pro C Programming",
                                publishedDate:"01-02-2015"
                            },
                            {
                                name:"You Can Win",
                                publishedDate:"11-20-2013"
                            }
                    ]
                }
          ]
}]);

HTML Template:

<body ng-app="myApp">
    <div ng-controller="myCtrl">
<h2>Authors</h2>
  <ul class="list-group">
    <li class="list-group-item" ng-repeat="author in authors" > {{author.name}}
      <br/>
      <strong>Books:</strong>
      <select class="form-control" ng-model="author.selectedbook" ng-options="book.name for book in author.books" >
        <option value="">--Select--</option>
      </select>
      <strong>Selected Book:</strong>{{author.selectedbook.name}}
    </li>
    
  </ul>

   </div>
</body>

We will use ng-repeat directive to iterate all objects in authors’s collection & then loop through each book object in books array of each author.

Use list-group bootstrap class to the li tag to display a visually formatted list. Here, we are iterating through each author object & displaying each author name using {{author.name}} angular expression tag. Each book in books array is bind to every option of select dropdown.

ng-model: we have used author.selectedbook as ng-model here to store selected book. By doing this there is one more property called selectedbook created in each author object and the same is available in controller’s scope.

When we select any book of particular author the value of select dropdown is bind to the author.selectedbook & we can access name property of each book like this author.selectedbook.name.

Refer fig. below.

angular-ng-options