Home > DeveloperSection > Forums > Filters In AngularJS
Ankit Singh

Total Post:341

Points:2389
Posted on    February-24-2016 10:31 PM

 Angular JS JQuery  Angular JS 
Ratings:


 1 Reply(s)
 283  View(s)
Rate this:
We want to List data filter in AngularJS. How we will do this please give me solutions.


aditya kumar Patel

Total Post:246

Points:1752
Posted on    February-24-2016 10:34 PM

@{
    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>


Don't want to miss updates? Please click the below button!

Follow MindStick