---
title: "How to Search Record in Angular js in asp.net"  
description: "How to Search Record in Angular js in asp.net"  
author: "Anonymous User"  
published: 2015-12-16  
updated: 2023-07-03  
canonical: https://www.mindstick.com/forum/33745/how-to-search-record-in-angular-js-in-asp-dot-net  
category: ".net"  
tags: ["asp.net", "jquery", "angular js"]  
reading_time: 3 minutes  

---

# How to Search Record in Angular js in asp.net

I want to [Search](https://www.mindstick.com/articles/65368/best-smo-services-company-in-hyderabad-improve-search-rankings) Record in [Angular](https://www.mindstick.com/articles/13081/advantages-disadvantages-of-angularjs-is-that-ideal-for-your-project) js in [asp.net](https://www.mindstick.com/articles/934/default-folders-available-inside-the-asp-dot-net-application-folder) please help me.

## Replies

### Reply by Aryan Kumar

Sure, here are the steps on how to search record in Angular JS in ASP.NET:

1. Add the Angular JS library to your ASP.NET project.
2. Create a view that will display the search results.
3. In the view, use Angular JS to create a search box.
4. Bind the search box to a model.
5. Implement the search logic in Angular JS.

Here is an example of the code:

HTML

```plaintext
<!DOCTYPE html>
<html>
<head>
    <title>Search Records</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
    <h1>Search Records</h1>

    <div ng-app="myApp">
        <input type="text" ng-model="searchTerm" placeholder="Search">
        <ul>
            <li ng-repeat="record in records | filter:searchTerm">
                {{record.name}}
            </li>
        </ul>
    </div>

    <script>
    var myApp = angular.module("myApp", []);

    myApp.controller("MyController", function($scope) {
        $scope.records = [
            {
                name: "John Doe",
                address: "123 Main Street"
            },
            {
                name: "Jane Doe",
                address: "456 Elm Street"
            },
            {
                name: "Bill Smith",
                address: "789 Oak Street"
            }
        ];
    });
    </script>
</body>
</html>
```

This code will add the Angular JS library to your ASP.NET project. The `searchTerm` variable will be used to store the search term. The `records` variable will be used to store the records that match the search term.

The `MyController` controller will be used to initialize the Angular JS application and bind the search box to the `searchTerm` variable. The `MyController` controller will also implement the search logic.

The `filter` function will be used to filter the records based on the search term. The `filter` function will return the records that contain the search term in the `name` property.

The `ng-repeat` directive will be used to iterate through the records and display them in a list.

Here are some additional things to keep in mind when searching records in Angular JS:

- The search term can be anything. It can be a name, an address, or any other piece of data that is stored in the records.
- The search logic can be implemented in any way that you want. You can use a simple string comparison, or you can use a more complex algorithm.
- The search results can be displayed in any way that you want. You can use a list, a table, or any other type of UI element.

### Reply by Anonymous User

```
<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title>Instant Search</title>    <link href="http://fonts.googleapis.com/css?family=Cookie|Open+Sans:400,700" rel="stylesheet" />    <!-- The main CSS file -->    <link href="style.css" rel="stylesheet" />    <!--[if lt IE 9]>   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  <![endif]--></head><body ng-app="instantSearch" ng-controller="InstantSearchController">    <div class="bar">        <input type="text" ng-model="searchString" placeholder="Enter your search terms" />    </div>    <ul>        <li ng-repeat="i in items | searchFor:searchString">            <a href="{{i.url}}">                <img ng-src="{{i.image}}" /></a>            <p>{{i.title}}</p>        </li>    </ul>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>    <script src="script.js"></script></body></html>
```

![How to Search Record in Angular js in asp.net](https://www.mindstick.com/mindstickforums/ab5b94a0-8ea4-4e5f-a1f2-216c4e3e7a42/images/cd49b821-955a-49b6-93ae-19893006f4a9.png)


---

Original Source: https://www.mindstick.com/forum/33745/how-to-search-record-in-angular-js-in-asp-dot-net

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
