Member 12677894 Ответов: 2

Как фильтровать записи в angular js с помощью выпадающего списка и ввода текстового поля

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
<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>


вот мой код контроллера
<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';
   
})


Что я уже пробовал:

я пробовал различные привязки данных и использование директив, но безрезультатно, я новичок в angularjs, помогите plz, заранее спасибо

2 Ответов

Рейтинг:
18

Karthik_Mahalingam 

<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>

Member 12677894

спасибо, приятель, это работает, но я не понял, почему мы должны передавать объект $filter, а в ng-repeat вы передали "это", вместо этого, если мы пишем "сотрудники", это не работает, почему это так?

Karthik_Mahalingam

[^]

Member 12677894

спасибо :-)

Karthik_Mahalingam

:)

Рейтинг:
1

Member 14605272

с той же проблемой, что и с angular 8, есть ли кто-нибудь, кто может мне помочь ?

Richard Deeming

Если вы хотите задать вопрос, то ЗАДАВАТЬ ВОПРОС[^].

НЕ разместите свой вопрос как "решение" на чей-то другой вопрос.