Question

我是这个框架的新手，因此练习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-model查询没有选择正确的映射，或者我可能是以错误的方式做事，

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

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

Answer 1

我创造了一个plunkr。您可以在搜索查询上定义要过滤的属性。在选择中，选择要过滤的属性并将其分配给搜索查询。

http://plnkr.co/edit/XklvXtc1AZpndjLvXrh8?p=preview

Answer 2

您引用的示例使用object指定过滤器键，而您的代码始终发送一个字符串，这是主要问题原因。

我们假设我在搜索字段中键入了“e”。如果未选择“搜索依据”，则过滤器将在每个键值中搜索“e”。当我们从“搜索依据”中选择值时，查询字符串将成为当前选项的值（“名称”，“公司”或“名称”），并且将以与“e”相同的方式进行，除非没有任何结果，因为有测试数据中的任何匹配。

选择“搜索依据”的正确方法是使用名为选择选项的单个键构造一个对象，等于搜索查询。因此，如果用户使用“sh”搜索名称，则为：

{
    name: "sh"
}

如果尚未选择任何选项，则该属性应命名为“$”，这样过滤器将在所有属性中搜索。

我已修复代码按预期工作（link）。你如何实现这个是另一个问题，但我在$ scope上定义了queryFilter对象，getter返回了所需格式的对象。

.controller("empCtrl", function($scope) {
  Object.defineProperty($scope, "queryFilter", {
      get: function() {
          var out = {};
          out[$scope.queryBy || "$"] = $scope.query;
          return out;
      }
  })
...

<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="queryBy">
                    <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:queryFilter">
                <td>{{emp.name}}</td>
                <td>{{emp.company}}</td>
                <td>{{emp.designation}}</td>
            </tr>
        </table>
    </div>
</body>

Answer 3

简单灵活jsfiddle。

也可以提及过滤字段

patients table

Answer 4

如果要进行类似Flipkart的搜索，请使用此选项。我已经使用了上面的jsfiddle代码并对其进行了修改：

HTML：

<div ng-app="myapp" ng-controller="myctrl">
    <input type="text" ng-model="filter_text">
    <ul>
        <li ng-repeat="item in items | myfilter:filter_text">
            {{item}}
        </li>
        
    </ul>
</div>

Filter.js：

angular.module('myapp', []).filter('myfilter', function($filter){
    return function(input, text){
     var filteredArray=[];
     var filteredArray1=[];
     var filteredArray2=[];
        filteredArray = $filter('filter')(input,text);
        for(var k=0;k<filteredArray.length; k++){
            if (filteredArray[k].match("^"+text)) {
                         filteredArray1.push(filteredArray[k]);
                    }else{
            filteredArray2.push(filteredArray[k]);
          }
        }
        
          
       return filteredArray1.concat(filteredArray2)
    };
});

Controller.js：

function myctrl($scope){
    $scope.filter_text = 'a';
    $scope.items = [
        'abc',
        'bca',
        'baby ama',
        'amazon','zon','zoom'
    ];
}

Angular.js中的搜索过滤器，

4 个答案: