A Responsive Blogger Website, That Take my blog to the next level.

I am a Software Developer, Learning and experementing with .Net Technology and try to put my Learning altogether here.

We have all sections related to .Net Technology, like .Net-C#, Asp.Net, MVC, jQuery, AngularJs, Sharepoint. Find out more...

Following are the some of the Advantages of using this Web site :-

  • Get Update about latest in .Net world.
  • Collection of Useful, Frequently used .Net Solutions.
  • It’s beautiful on every screen size (try resizing your browser!)

Search filter in AngularJS

Search filter in AngularJS

As we type in the search textbox, all the columns in the table must be searched and only the matching rows should be displayed. 

Script.js :

var app = angular
        .module("myModule", [])
        .controller("myController", function($scope) {

            var employees = [
                { name: "Ben", gender: "Male", salary: 55000, city: "London" },
                { name: "Sara", gender: "Female", salary: 68000, city: "Chennai" },
                { name: "Mark", gender: "Male", salary: 57000, city: "London" } ,
                { name: "Pam", gender: "Female", salary: 53000, city: "Chennai" },
                { name: "Todd", gender: "Male", salary: 60000, city: "London" },
      & nbsp;     ];

            $scope.employees = employees;

HtmlPage1.html :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/Script.js"></script>
    <link href="Styles.css" rel="stylesheet" />
<body ng-app="myModule">
    <div ng-controller="myController">
        Search : <input type="text" p laceholder="Search employees"
                        ng-model="searchText" />
        <br /><br />
          &n bsp;         <th>Salary</th>
                <tr ng-repeat="employee in employees | filter:searchText">
                    <td> {{ employee.name }}</td>
                    <td> {{ employee.gender }}</td>
                    <td> {{ employee.salary  }} </td>
                    <td> {{ employee.city  }} </</ span>td>
& nbsp;               </tr>

Styles.css :

body {

table {

td {
    border1px solid black;
  &nb sp; padding5px;

th {
    border1px solid black;

At the moment, the search is being done across all col umns. If you want to search only one specific column, then change ng-model directive value on the search textbox as shown below. With this change only city column is searched.

<input type="text" ng-model="searchText.city" placeholder="Search employees" />