Post
Ask Question

Filter Data in ASP.Net Application Using AngularJS

Introduction

In my previous article, I explained How to use ng-init and ng-repeat directives of AngularJS in ASP.NET Applications.

This article explains how to filter data in an ASP.NET Application using AngularJS.

I am working on the previous application so I'll show the data using the repeat and will subscribe to the data using the init directive.

Use the following procedure to create such an application.

Step 1. For making today's application you need to add two external files, one is angular.min.js and the second is angular-animate.min.js.

You can download the Zip file provided at the start of this article and then fetch these js files from it.

After downloading these files you need to add them to the start of the application, in other words in the head tag.

<script src="angular.min.js"></script>
<script src="angular-animate.min.js"></script>

Step 2. Now we will first declare some default values that will be used to show how to use the repeat directive. These values will be provided using the init directive as in the following.

<p ng-init="cars = [
    {name:'Honda City', buy_in:2003, price:700000},
    {name:'Laura', buy_in:2005, price:1300000},
    {name:'Cruze', buy_in:2010, price:1700000},
    {name:'Audi Q6', buy_in:2013, price:5200000}
]">

Here I have initialized the value to the Scope using the init directive. Three different columns are created in which four different rows of values are defined.

Step 3. Now I will show how the ng-repeat directive can be used and how it works.

<h2> I have {{cars.length}} cars and they are:</h2>
<label>Type Here to Filter Data: </label><input type="search" ng-model="q" placeholder="filter cars..." />
<br /><br />
<ul class="example-animate-container">
  <li class="animate-repeat" ng-repeat="car in cars | filter:q">
    [{{$index + 1}}] {{car.name}} was bought in {{car.buy_in}} at a price of {{car.price}}.
  </li>
</ul>
</p>

Here first I am showing the number of rows that have the data, which can be found using ".length", then I took an unordered list in which a list is taken, in this list, ng-repeat is used. ng-repeat will help us to show all the data by using a list only for one time.

In the input tag, you can see that a ng-model is declared and some text is provided using the placeholder that will be hidden when the user clicks on the TextBox.

In ng-repeat "car in cars" is declared; cars were declared in the init, in the ng-repeat one more thing is written after the car in cars, in other words "filter:q", this will help to filter the data depending on data provided in the TextBox because "q" was declared in the TextBox.

Then [{{$index+1}}] is used, this will act as a serial number for each row, it will be auto-incremented on each new row added. After this car.name, car.buy_in, and car. price are used that will show the data for a different row.

Now our application is ready to be executed.

The complete code of this application is as follows.

<!DOCTYPE html>
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="angular.min.js"></script>
    <script src="angular-animate.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <p ng-init="cars = [
          {name:'Honda City', buy_in:2003, price:700000},
          {name:'Laura', buy_in:2005, price:1300000},
          {name:'Cruze', buy_in:2010, price:1700000},
          {name:'Audi Q6', buy_in:2013, price:5200000}
        ]">
            <h2> I have {{cars.length}} cars and they are:</h2>
            <label>Type Here to Filter Data: </label><input type="search" ng-model="q" placeholder="filter cars..." />
            <br /><br />
            <ul class="example-animate-container">
                <li class="animate-repeat" ng-repeat="car in cars | filter:q">
                    [{{$index + 1}}] {{car.name}} was baught in {{car.buy_in}} at a price of {{car.price}}.
                </li>
            </ul>
        </p>
    </form>
</body>
</html>

Output

On running the application you will get the output like this.

Output

Here you can see that all the data is shown but as I write something in the TextBox, the filter begins to work and filter the data depending on the data entered in the TextBox.

TextBox


Similar Articles