How to Search and Filter in AngularJS

In this blog you will learn how to search and filter in AngularJS.

Code for search

<div class="navbar-form" role="search">
    <div class="input-group add-on">
        <input ng-model="search"ng-keydown="clear()"placeholder="Search"name="srch-term" id="search" class="form-control" type="text">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit" ng-click="sear()">
                    <i class="glyphicon glyphicon-search"></i>Search
                </button>
            </div>
     </div>
</div>

Search to firstName, LastName and Phone

 

 

Code For Search button

$scope.sear = function() {
    var orderBy = $filter('orderBy');
    $scope.order = function(Btn) {
        $scope.users = orderBy($scope.users, Btn);
    };
};

Filter With AngularJS

<thead>
    <a href="" ng-click="Btn=''">Reset</a> ]
    <table id="mytable" class="table table-striped table-bordered table-condensed table-striped table-hover ">
        <tr class="danger">
            <th>
                <a href="" ng-click="Btn = 'name'; reverse=true"></a>
                <a href="" ng-click="Btn = '-fName'; reverse=true">
First Name</a>
            </th>
            <th class="text-center">
                <a href="" ng-click="Btn = 'name'; reverse=true"></a>
                <a href="" ng-click="Btn = '-lName'; reverse=true">
Last Name</a>
            </th>
            <th class="text-center">
                <a href="" ng-click="Btn = 'name'; reverse=true"></a>
                <a href="" ng-click="Btn = '-email'; reverse=true">
Email Id</a>
            </th>
            <th>
                <a href="" ng-click="Btn = 'num'; reverse=true"></a>
                <a href="" ng-click="Btn = '-number'; reverse=true">
Phone Number</a>
            </th>
            <th class="text-center">
Image
</th>
            <th >
Action
</th>
        </tr>
    </thead>
<tbody>

 

Filter Firstname, lastname and phone.

 

Reset Button to set main formats.

 

Thank You