Javascript 在Angular.js中按过滤器搜索，_Javascript_Angularjs_Single Page Application

Javascript 在Angular.js中按过滤器搜索，

javascript angularjs

Javascript 在Angular.js中按过滤器搜索，,javascript,angularjs,single-page-application,Javascript,Angularjs,Single Page Application,我是这个框架的新手，因此练习Angularjs并遵循网站上提供的教程例如，我们可以搜索表中的数据，示例如下： <!DOCTYPE html> <html ng-app="SmartPhoneApp"> <head> <title>Smart phone Angular</title> <script type="text/javascript" src="D:/Rahul Shivsharan/In

我是这个框架的新手，因此练习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>


智能手机
var smartPhoneApp=angular.module（“smartPhoneApp”，[]）；
smartPhoneApp.controller（“phoneCtrl”，函数（$scope）{
$scope.phones=[
{
“型号名称”：“LUMIA 520”，
“公司名称”：“诺基亚”
},
{
“型号名称”：“银河S系列”，
“公司名称”：“三星”
},
{
“modelName”：“CANVAS”，
“公司名称”：“MICROMAX”
},
{
“模型名”：“擎天柱”，
“公司名称”：“LG”
}
];
});
按型号名称搜索：
按公司搜索：
{{phone.modelName}
{{phone.companyName}

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

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

代码如下

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


订购人员
var employeeApp=angular.module（“employeeApp”，[]）；
employeeApp.controller（“empCtrl”，函数（$scope）{
$scope.employees=[
{
“名称”：“Mahesh Pachangane”，
“公司”：“Syntel印度私人有限公司”，
“指定”：“合伙人”
},
{
“姓名”：“Brijesh Shah”，
“公司”：“Britanica软件有限公司”，
“指定”：“软件工程师”
},
{
“姓名”：“Amit Mayekar”，
“公司”：“顶点解决方案”，
“指定”：“人力资源”
},
{
“姓名”：“尼纳德·帕特”，
“公司”：“人造解决方案”，
“指定”：“高级建筑师”
},
{
“名称”：“Sunil Shrivastava”，
“公司”：“IBM”，
“名称”：“项目负责人”
},
{
“姓名”：“Pranav Shastri”，
“公司”：“TCS”，
“任命”：“高级软件工程师”
},
{
“姓名”：“Madan Naidu”，
“公司”：“毕马威”，
“任命”：“高级助理”
},
{
“名称”：“Amit Gangurde”，
“公司”：“亚马逊”，
“指定”：“项目经理”
}   
];
$scope.orderProp=“name”；
});
搜索：
搜索人：
名称
公司
任命

员工姓名
公司名称
任命
{{emp.name}
{{emp.company}}
{{emp.designation}}

从上面的代码中，您可以看到我试图实现的是通过选择框中的“姓名”、“公司”或“指定”搜索员工

但我在这里出了问题

ng model查询没有选择正确的映射，或者可能是我做错了

你能告诉我我将如何做到这一点吗

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

您提到的示例使用对象指定筛选键，而您的代码总是发送字符串，这是问题的主要原因

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

选择“SearchBy”的正确方法是使用一个名为Selected option的键构造一个对象，该键等于search query。因此，如果用户使用“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;
      }
  })
...


搜索：
搜索人：
名称
公司
任命

员工姓名
公司名称
任命
{{emp.name}
{{emp.company}}
{{emp.designation}}

我已经创建了一个plunkr。您可以在搜索查询上定义要根据其进行筛选的属性。在“选择”对话框中，选择要按其进行筛选并指定的特性

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

filterFields: [
  "name",
  "company"
]

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

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)
    };
});

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