Angular.js中的搜索过滤器，

小编典典

Angular.js中的搜索过滤器，

angularjs

我是这个框架的新手，因此练习Angularjs并遵循网站上提供的教程。

有一个示例，我们可以搜索表中存在的数据，示例如下，

<!DOCTYPE html>
<html ng-app="SmartPhoneApp">
<head>
    <title>Smart phone Angular</title>      
    <script type="text/javascript" src="D:/Rahul Shivsharan/Installers/AngularJS/angular.js"></script>
    <script type="text/javascript">
        var smartPhoneApp = angular.module("SmartPhoneApp",[]);

        smartPhoneApp.controller("phoneCtrl",function($scope){
            $scope.phones = [
                {
                    "modelName" : "LUMIA 520",
                    "companyName" : "NOKIA"
                },
                {
                    "modelName" : "GALAXY S Series",
                    "companyName" : "SAMSUNG"
                },
                {
                    "modelName" : "CANVAS",
                    "companyName" : "MICROMAX"
                },
                {
                    "modelName" : "OPTIMUS",
                    "companyName" : "LG"                        
                }
            ];

        });
    </script>   
</head>
<body>  
    Search by Model Name : <input ng-model="comp.modelName" />  
    Search by Company : <input ng-model="comp.companyName" />   
    <div ng-controller="phoneCtrl">
        <table ng-repeat="phone in phones | filter: comp">
            <tr>
                <td>{{phone.modelName}}</td>
                <td>{{phone.companyName}}</td>
            </tr>
        </table>
    </div>
</body>
</html>

在上面的代码中，我可以使用两个不同的输入来搜索手机，即按型号名称搜索和按公司名称搜索，以上代码运行良好，

但是，如果我需要使用选择选项中存在的搜索类型进行搜索，该怎么办？

代码如下

<!DOCTYPE html>
<html ng-app="EmployeeApp">
<head>
    <title>Orderring People</title>     
    <script type="text/javascript" src="D:/Rahul Shivsharan/Installers/AngularJS/angular.js"></script>
    <script type="text/javascript">
        var employeeApp = angular.module("EmployeeApp",[]);
        employeeApp.controller("empCtrl",function($scope){
            $scope.employees = [
                {
                    "name" : "Mahesh Pachangane",
                    "company" : "Syntel India Pvt. Ltd",
                    "designation" : "Associate"
                },
                {
                    "name" : "Brijesh Shah",
                    "company" : "Britanica Software Ltd.",
                    "designation" : "Software Engineer"
                },
                {
                    "name" : "Amit Mayekar",
                    "company" : "Apex Solutions",
                    "designation" : "Human Resource"
                },
                {
                    "name" : "Ninad Parte",
                    "company" : "Man-made Solutions",
                    "designation" : "Senior Architect"
                },
                {
                    "name" : "Sunil Shrivastava",
                    "company" : "IBM",
                    "designation" : "Project Lead"
                },
                {
                    "name" : "Pranav Shastri",
                    "company" : "TCS",
                    "designation" : "Senior Software Engineer"
                },
                {
                    "name" : "Madan Naidu",
                    "company" : "KPMG",
                    "designation" : "Senior Associate"
                },
                {
                    "name" : "Amit Gangurde",
                    "company" : "Amazon",
                    "designation" : "Programe Manager"
                }   
            ];
            $scope.orderProp="name";                
        });
    </script>   
</head>
<body ng-controller="empCtrl">      
    <table>
        <tr>
            <td align="right">Search :</td>
            <td><input ng-model="query" /></td>
        </tr>           
        <tr>
            <td align="right">Search By :</td>
            <td>
                <select ng-model="query">
                    <option value="name">NAME</option>
                    <option value="company">COMPANY</option>
                    <option value="designation">DESIGNATION</option>
                </select>   
            </td>
        </tr>
    </table>
    <hr>
    <div>
        <table>
            <tr>
                <th>Employee Name</th>
                <th>Company Name</th>
                <th>Designation</th>
            </tr>
            <tr ng-repeat="emp in employees | filter:query">
                <td>{{emp.name}}</td>
                <td>{{emp.company}}</td>
                <td>{{emp.designation}}</td>
            </tr>
        </table>
    </div>
</body>

从上面的代码中，您可以看到我正在尝试通过选择框中显示的“姓名”，“公司”或“名称”搜索员工，

但是我在这里错了

在 NG-模型查询 没有拿起合适的映射，或可我在一个错误的方式做，

你能告诉我我将如何实现这一目标，

我应该更改代码的哪一部分

阅读 227

2020-07-04

共1个答案

小编典典

我已经创建了一个小矮人。您可以在搜索查询上定义属性以进行过滤。在选择中，选择要作为过滤依据的属性，并将其分配给搜索查询。

http://plnkr.co/edit/XklvXtc1AZpndjLvXrh8?p=预览

2020-07-04