Post
Ask Question

Start With AngularJS: Part 5

Before reading this article, I highly recommend reading the previous part of the series.

Filter in AngularJS

It is used to format data before displaying it to users. Here it can be used in view templates, controllers, services, and directives.

AngularJS provides filters to transform data.

  • Currency: Format a number in a currency format.
  • Date: Format a date in a specified format.
  • Filter: Select a subset of items from an array.
  • JSON: Format an object to a JSON string.
  • Limit To: Limits an array/string, into a specified number of elements/characters.
  • Lowercase: Format a string to lowercase.
  • Number: Format a number to a string.
  • Order by: Orders an array by an expression.
  • Uppercase: Format a string to upper case.

Let’s start creating filter projects

  1. Open an old visual studio project
  2. Add a new HTML file with the name Filter.
  3. Add bootstrap cdn also.
    Filter HTML 
    <!DOCTYPE html>
<html>
<head>
    <title>Filter Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
    <script>
        var members = [
          {
            username: 'Shiva',
            address: 'Delhi',
            sallery: '25000',
            Designation: 'Software Developer'
        }, {
            username: 'Rahul',
            address: 'Noida',
            sallery: '20000',
            Designation: 'Software Developer'
        }, {
            username: 'Kshma',
            address: 'Mumbai',
            sallery: '26000',
            Designation: 'Software Designer'
        }, {
            username: 'Ashita',
            address: 'Varanasi',
            sallery: '22000',
            Designation: 'Teacher'
        }];

        var app = angular.module("app", []);
        app.controller("ListController", ["$scope", function($scope) {
            $scope.Members = members;
        }]);
    </script>
    
    <div ng-app="app" ng-controller="ListController">
        <h3>Exact or contains filter</h3>
        <div>
            Filter Username or address or sallery:
            <input type="text" ng-model="mysearch.$" /> Address only:
            <input type="text" ng-model="mysearch.address" /> sallery :
            <input type="text" ng-model="mysearch.sallery" />
        </div>
        <div class="container">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>UserName</th>
                            <th>Address</th>
                            <th>sallery</th>
                            <th>Designation</th>
                        </tr>
                    </thead>
                    <tr ng-repeat="member in Members | filter: mysearch:exact">
                        <td>{{member.username}}</td>
                        <td ng-bind="member.address"></td>
                        <td>{{member.sallery}}</td>
                        <td>{{member.Designation}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

Output

Output

Template: An angular template can have Directive, HTML markup, CSS, Filters, Expressions, and Form controls. Templates are used to display the information from the model and controller that a user sees in his browser.

Types of templates


1. Static templates

A static template is defined by using a script tag. It must have an id attribute with a unique value and a type attribute with value text/ng-template.

As

<script type="text/ng-template" id="person.html">
    {{person.name}}: {{person.Address}}
</script>
Here
<div ng-include="'person.html'">
</div>

Used for rendering.

2. Dynamic templates

A dynamic template is an HTML page that is compiled and rendered by Angular on demand.Ng-include use for rendering in the dynamic template.

Let’s start creating a project.

  1. Open an old visual studio project
  2. Add a new HTML file with the name of the Template.
    Template HTMlL 
    <!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script>
        var members = [
          {
            username: 'Shiva',
            address: 'Delhi'
        }, {
            username: 'Rahul',
            address: 'Mumbai'
        }, {
            username: 'Kshma',
            address: 'Mumbai'
        }, {
            username: 'Ashita',
            address: 'Varanasi'
        }];
        var app = angular.module('app', []);
        app.controller('MemberController', function($scope)   
        {
            $scope.Members = members;
        });
    </script>
</head>
<body ng-app="app">
    <p>AngularJS basic template</p>
    <h4>Listing item from the collection</h4>
    <div ng-controller="MemberController">
        <ul>
            <li ng-repeat="member in Members">
                {{$index + 1}}. Name: {{member.username }} | Address: {{ member.address}}
            </li>
        </ul>
    </div>
</body>
</html>

Output

Angular basic


Similar Articles