How to filter records in angular js with dropdown and text box input

Question

0.00/5 (No votes)

See more:

i have 5 records in table format, and i want to filter records by different parameters such as name, age and company.i have populated name, age, company in the drop-down and when user selects name, and if he enters anything in the textbox provided will be filtered by name, and if the user wants to search by age, he selects age in the dropdown and types in text box, records should be filtered by age, how to do it in angularjs

HTML

<pre><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/JavaScript1.js"></script>
    <title></title>
</head>
<body ng-app="MyModule" ng-controller="Mycontroller">
    <select id="Select1" ng-model="selected">
        <option>name</option>
        <option>age</option>
        <option>gender</option>
        <option>company</option>
    </select>
    <input type="text" placeholder="search" ng-model="parameter" />
    <table border="1" style="border:thin;border-collapse:collapse">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Gender</th>
                <th>Company</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="employee in employees|search">
                <td>{{employee.name}}</td>
                <td>{{employee.age}}</td>
                <td>{{employee.gender}}</td>
                <td>{{employee.company}}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

here is my controller code

JavaScript

<pre>/// <reference path="angular.min.js" />
var app = angular.module("MyModule", []).filter("search", function () {
    return function (employee) {
        if($scope.selected=='name')
        {
            if ($scope.parameter == employee.name)
                return employee;
        }
        if ($scope.selected == 'age') {
            if ($scope.parameter == employee.age)
                return employee;
        }
        if ($scope.selected == 'company') {
            if ($scope.parameter == employee.company)
                return employee;
        }
    }
}).controller("Mycontroller", function ($scope) {
    var employees=[{name:'raj',age:'23',gender:'M',company:'Mobileaspects'},
        {name:'santosh',age:'26',gender:'M',company:'Mobileaspects'},
        {name:'siddu',age:'21',gender:'M',company:'Mobileaspects'},
        {name:'sharana',age:'24',gender:'M',company:'TCS'},
        {name:'Rakshita',age:'23',gender:'F',company:'Mobileaspects'},
    ];
    $scope.employees = employees;
    $scope.selected = 'name';
   
})

What I have tried:

i tried various of binding data and using directives but no use, am newbiw to angularjs, help out plz, thanks in advance

Posted 3-Jun-17 21:18pm

Member 12677894

Updated 26-Sep-19 17:15pm

Add a Solution

2 solutions

Solution 2

with the same issue as with angular 8, is there anyone who can help me ?

Posted 26-Sep-19 17:16pm

Member 14605272

Comments

Richard Deeming 27-Sep-19 8:34am

If you want to ask a question, then ASK A QUESTION[^].

DO NOT post your question as a "solution" to someone else's question.

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)

Karthik_Mahalingam · Accepted Answer · 2017-06-04T21:14:00

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

    
    <title></title>
    <script>
        var app = angular.module("MyModule", []).filter("search", function ($filter) {
            return function (employees, $scope) {
                var selected = $scope.selected;
                var parameter = $scope.parameter;                
                if (parameter == undefined || parameter == '') return employees;
                var resultSet = [];
                for (var i = 0; i < employees.length; i++) {
                    var employee = employees[i];
                    if (selected == 'name') {
                        if (parameter == employee.name)
                            resultSet.push(employee);
                    }
                    if (selected == 'age') {
                        if (parameter == employee.age)
                            resultSet.push(employee);
                    }
                    if (selected == 'company') {
                        if (parameter == employee.company)
                            resultSet.push(employee);
                    }
                }
                return resultSet;

               
            }
        }).controller("Mycontroller", function ($scope) {
            var employees = [{ name: 'raj', age: '23', gender: 'M', company: 'Mobileaspects' },
                { name: 'santosh', age: '26', gender: 'M', company: 'Mobileaspects' },
                { name: 'siddu', age: '21', gender: 'M', company: 'Mobileaspects' },
                { name: 'sharana', age: '24', gender: 'M', company: 'TCS' },
                { name: 'Rakshita', age: '23', gender: 'F', company: 'Mobileaspects' },
            ];
            $scope.employees = employees;
            $scope.selected = 'name';

        })
    </script>
</head>
<body ng-app="MyModule" ng-controller="Mycontroller">
    <select id="Select1" ng-model="selected">
        <option>name</option>
        <option>age</option>
        <option>gender</option>
        <option>company</option>
    </select>
    <input type="text" placeholder="search" ng-model="parameter" />
    <table border="1" style="border:thin;border-collapse:collapse">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Gender</th>
                <th>Company</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="employee in employees|search:this">
                <td>{{employee.name}}</td>
                <td>{{employee.age}}</td>
                <td>{{employee.gender}}</td>
                <td>{{employee.company}}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>