10

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

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

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

4

4 回答 4

28

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

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

于 2013-10-25T10:15:35.843 回答
4

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

假设我在搜索字段中输入了“e”。如果没有选择“搜索依据”，过滤器将在每个键值中搜索“e”。当我们从“Search by”中选择值时，查询字符串成为当前选项的值（“name”、“company”或“designation”），并会在与“e”相同的场景中进行，除了没有任何结果，因为有测试数据中没有任何匹配项。

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

{
    name: "sh"
}

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

我已将代码修复为按预期工作（链接）。如何实现这是另一个问题，但我在 $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>
于 2013-10-25T10:03:33.863 回答
1

简单灵活的 jsfiddle。

也可以提及过滤字段

filterFields: [
  "name",
  "company"
]
于 2018-01-23T11:48:08.620 回答
0

如果您想要类似 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>

过滤器.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)
    };
});

控制器.js：

function myctrl($scope){
    $scope.filter_text = 'a';
    $scope.items = [
        'abc',
        'bca',
        'baby ama',
        'amazon','zon','zoom'
    ];
}
于 2020-07-23T14:32:47.607 回答