在Angular.js中搜索篩選器，

我是這個框架的新手，因此練習Angularjs並遵循網站上提供的教程。在Angular.js中搜索篩選器，

有一個例子是我們可以搜索存在於表中的數據，的例子如下，

<!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-模型查詢沒有拿起合適的映射，或可能是我在一個錯誤的方式做，

可以請你告訴我，我將如何實現這一目標，

這部分的代碼，我應該改變

來源

2013-10-25 Rahul Shivsharan

http://www.angulartutorial.net/2015/04/angular-js-basic-search-and-filter-data.html – Prashobh

我創建了一個plunkr。您可以在搜索查詢中定義要過濾的屬性。在select中選擇要過濾的屬性並將其分配給搜索查詢。

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

來源

2013-10-25 10:15:35 bekite

由於過濾器的參考。這是有幫助的:) – Miles

這麼好，我想upvote兩次 –

您參考使用對象，指定過濾器按鍵的例子，當你的代碼總是發送一個字符串，這是主要的問題原因。

我們假設我在搜索字段中輸入了「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>

來源

2013-10-25 10:03:33

簡單，靈活jsfiddle。

下面是我所使用

app.filter('tableSearch', function() { 
    return function (list, query, fields) { 
     if (!query) { 
      return list; 
     } 
     query = query.toLowerCase().split(' '); 
     if (!angular.isArray(fields)) { 
      fields = [fields.toString()]; 
     } 
     return list.filter(function (item) { 
      return query.every(function (needle) { 
       return fields.some(function (field) { 
        var content = item[field] != null ? item[field] : ''; 

        if (!angular.isString(content)) { 
         content = '' + content; 
        } 

        return content.toLowerCase().indexOf(needle) > -1; 
       }); 
      }); 
     }); 
    }; 
})

來源

2018-01-23 11:48:08

在Angular.js中搜索篩選器，

回答

相關問題