Angular js filter exact match search in only one column

Question

1.73/5 (3 votes)

See more:

How do i implement exact match search filter for only one column and rest should not be exact match.

Let say i have a employee table with employee name and other details. I would like to filter name when its matched exactly but i want to leave the rest.

How do i do it in simple way?

What I have tried:

HTML:

<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    <style>
        table  {
            border-style: solid;
            border-collapse:collapse;
        }

        th {
            border-style: solid;
        }
        td {
            border-style: solid;
        }
    </style>
</head>
<body ng-app="mymodule">
    <div ng-controller="myController">
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Gender</th>
                    <th>Salary</th>
                    <th>City</th>
                </tr>
                <tr>
                    <th><input type="text" ng-model="searchText.name" /></th>
                    <th><input type="text" ng-model="searchText.gender" /></th>
                    <th><input type="text" ng-model="searchText.salary" /></th>
                    <th><input type="text" ng-model="searchText.city" /></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="employee in employees | filter:searchText">
                    <td> {{ employee.name }} </td>
                    <td> {{ employee.gender }} </td>
                    <td> {{ employee.salary }} </td>
                    <td> {{ employee.city }} </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script src="Scripts/angular.min.js"></script>
<script src="JavaScript.js"></script>
</html>

Angular:

var app = angular.module("mymodule", []);

app.controller("myController", function ($scope) {
    var employees = [
    { name: "Ben", gender: "Male", salary: 55000, city: "London" },
    { name: "Sara", gender: "Female", salary: 68000, city: "Newyork" },
    { name: "Mark", gender: "Male", salary: 57000, city: "Ashland" },
    { name: "Pam", gender: "Female", salary: 53000, city: "Hongkong" },
    { name: "Todd", gender: "Male", salary: 60000, city: "London" },];
    $scope.employees = employees;

    $scope.flag = function () {
        if ($searchText.name === employees.name) {
            return true;
        }
    }
});

Posted 23-Jul-17 18:38pm

gaurav.s23

Updated 24-Jul-17 3:37am

Add a Solution

2 solutions

Solution 1

I tried this way, it works for name column but i could not able to filter by other columns name.

<tr ng-repeat="employee in employees |filter:{'name':searchText.name}:true |filter:searchText">
                    <td > {{ employee.name }} </td>
                    <td> {{ employee.gender }} </td>
                    <td> {{ employee.salary }} </td>
                    <td> {{ employee.city }} </td>
                </tr>

Posted 23-Jul-17 19:08pm

gaurav.s23

Comments

Karthik_Mahalingam 24-Jul-17 3:55am

is this solution or comment?

[no name] 24-Jul-17 8:14am

That was not solution as that did not solve my problem. I was able to filter name column as requirement but i was not able to filter other columns.

Graeme_Grant 16-Sep-17 8:08am

Please don't answer your own question with a solution and then accept it as a valid solution. This is see as REP farming and can get you banned if continued. Update your question instead.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

gaurav.s23 · Accepted Answer · 2017-07-24T03:37:00

No worries guys. I did it. this is the solution.

angular:
$scope.OnEmpNameChange= function (empName) {
                console.log(empName);
                debugger;
                $scope.Reports = $scope.allEmployees;
                if (empName != "") {
                    console.log(empName);
                    debugger;
                    var newArray = [];
                    newArray = $scope.employees.filter(function (r) {
                        if (r.empName == empName) {
                            return r;
                        }
                    });
                     $scope.employees = newArray;
                }
                else {
                    $scope.employees = $scope.allEmployees;
                }
            }
			
			
			HTML:
			 <input type="text" ng-model="empName" ng-change="OnEmpNameChange(empName)" />