Home > DeveloperSection > Forums > Filters In AngularJS
 Ask Question

Filters In AngularJS

Total Post:341

Points:2389
 842  View(s)
Ratings:
Rate this:
We want to List data filter in AngularJS. How we will do this please give me solutions.

  1. Post:279

    Points:1987
    Re: Filters In AngularJS 

    @{
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <script src="~/Scripts/jquery-1.9.1.js"></script>
        <script src="~/Scripts/angular.js"></script>
        <title>Forum</title>
        <script>
            var mainApp = angular.module("mainApp", []);
            mainApp.controller('State', function ($scope) {
                $scope.array = [
                {
                    name: 'Kurt Boor',
                    Contact: '9214001001'
                },
                {
                    name: 'Boris Coblentz',
                    Contact: '9214001003'
                },
                {
                    name: "Omer Etzel",
                    Contact: "9214001002"
                },
                {
                    name: "Kurtis Simoneaux ",
                    Contact: "9214001004"
                },
                {
                    name: "Leon Evitt",
                    Contact: "9214001005"
                },
                {
                    name: "Mitchel Rodger",
                    Contact: "9214001009"
                },
                {
                    name: "Rich Rench",
                    Contact: "9214001006"
                },
                {
                    name: "Moises Littleton",
                    Contact: "9214001008"
                },
                {
                    name: "Norris Cardillo",
                    Contact: "9214001010"
                },
                {
                    name: "Noe Zigler",
                    Contact: "9214001007"
                },
                {
                    name: "Clemente Mccrimmon ",
                    Contact: "9214001011"
                },
                {
                    name: "Forest Alsobrook ",
                    Contact: "9214001012"
                },
                 {
                     name: "Darrel Platner",
                     Contact: "9214001016"
                 },
                   {
                       name: "Mohamed Durante",
                       Contact: "9214001019"
                   },
                {
                    name: "Sal Peach ",
                    Contact: "9214001015"
                }]
            })
        </script>
        <style>
            #div1 {
                height: 800px;
                background-color: #F9F0F2;
                font-size: 24px;
                width: 500px;
            }
            span {
             
                margin-top: 50px;
            }
            #inp1 {
                margin-left: 30px;
                margin-top: 20px;
            }
            table,
            th,
            td {
                border-collapse: collapse;
                padding: 5px;
            }
            tabletr:nth-child(odd) {
                background-color: #82F2E5;
                font-family: Verdana;
            }
            tabletr:nth-child(even) {
                background-color: blue;
                color: white;
                font-family: Arial;
            }
            #div1 {
                margin-top: 20px;
            }
        </style>
    </head>
    <body ng-app="mainApp">
        <div id="div1" ng-controller="State">
            <span>Enter Name / Number:</span>
            <input id="inp1" type="text" ng-model="FilterData" /><br />
            <div id="div1">
                <table style="width: 100%;">
                    <tr>
                        <th style="width: 50%; text-align: left;">Name</th>
                        <th style="width: 50%; text-align: left;">Contact NO</th>
                    </tr>
                    <tr ng-repeat="obj in array | filter:FilterData | orderBy:'name'">
                        <td>{{obj.name}}</td>
                        <td>{{obj.Contact}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
    </html>

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!

© Copyright © 2010 - 2018 MindStick Software Pvt. Ltd. All Rights Reserved