濾波器通過在文本屬性specifiec

我有對象的數組，象那些濾波器通過在文本屬性specifiec

{ name: "task1", owner: "david", des: "task1 description" }, 
{ name: "task2", owner: "Smith", des: "task2 description" }, 
{ name: "task1", owner: "david", des: "task1 description" },

也是select和textbox 以及示出它們全部的表。

我期待一種方式來filter，在表中的數據。用戶將從下拉列表中選擇一個值並在文本框中輸入文本。

則該表數據將被文本被過濾在從下拉列表中選擇的值（對象屬性）匹配。

例子：

從下拉菜單中選擇「名稱」，並在文本框中寫的「任務」將返回數組中的所有3個項目。文本字包含在所有3條記錄中。
從下拉列表中選擇文本「名」和寫「任務1」將返回記錄1和3

文本框的值將需要的過濾器發生。

可以將其與angularjs過濾器來完成？

https://plnkr.co/edit/Afs7MOIziUOvFWzBY7qf?p=preview

來源

2017-03-31 Eran Meir

過濾器上的實況演示認知頁面幾乎可以：https：//docs.angularjs.org/api/ng/filter/filter。所以你的問題的答案是肯定的，這是可以做到的。 –

我更新了我的plunker，我似乎無法使它發揮作用 - 你可以pleasse告訴我什麼，我做錯了什麼？ +也，我想要過濾器heppen **只**如果文本框不是空的，我怎麼能實現它？ –

https://plnkr.co/edit/kCI875Qg9FKccpMlF6gY?p=preview –

您需要使用ng-disabled財產上text-box

工作Plunker

的Html需要更新

<input ng-model="filterdata[filterProperty]" type="text" ng-disabled="!filterProperty" />

來源

2017-04-01 04:34:53 Gaurav

在這一點上它可能最容易編寫自定義過濾器。自定義過濾器非常簡單直觀，可以控制應用過濾器的方式和時間。這裏是你的情況下，工作樣本 - 它不是很強大的，因爲如果你試圖篩選數字屬性會破，但它給你的要點和東西的基礎上，並針對您的需求。

angular.module('myApp', []) 
 
    .controller('myCtrl', function($scope) { 
 
    $scope.cards = [{ 
 
     name: "task1", 
 
     owner: "david", 
 
     des: "task1 description" 
 
     }, 
 
     { 
 
     name: "task2", 
 
     owner: "Smith", 
 
     des: "task2 description" 
 
     }, 
 
     { 
 
     name: "task3", 
 
     owner: "Smith", 
 
     des: "task3 description" 
 
     }, 
 
     { 
 
     name: "task4", 
 
     owner: "Davis", 
 
     des: "task4 description" 
 
     }, 
 
     { 
 
     name: "task5", 
 
     owner: "Thomas", 
 
     des: "task5 description" 
 
     }, 
 
     { 
 
     name: "task6", 
 
     owner: "david", 
 
     des: "task6 description" 
 
     } 
 
    ]; 
 
    }) 
 
    .filter('myFilter', function() { 
 
    return function(items, property, value) { 
 
     // if items, property or value are missing return items by default 
 
     if (!items || !property || !value) { 
 
     return items; 
 
     } 
 
     // create an array to hold the matched items 
 
     var out = []; 
 
     angular.forEach(items, function(item) { 
 
     // see if the item property value contains the desired value 
 
     if (item[property].toLowerCase().includes(value.toLowerCase())) { 
 
      out.push(item); 
 
     } 
 
     }); 
 
     // return the array of items 
 
     return out; 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> 
 

 
<body ng-app="myApp"> 
 
    <div ng-controller="myCtrl"> 
 
    <div> 
 
     <select ng-model="filterProperty"> 
 
      <option value="">filter by</option> 
 
      <option value="name">name</option> 
 
      <option value="owner">owner</option> 
 
      <option value="des">des</option> 
 
     </select> 
 
     <input ng-model="filterData" type="text" /> 
 
    </div> 
 
    <table style="border: 1px solid"> 
 
     <tbody> 
 
     <tr> 
 
      <th>name</th> 
 
      <th>owner</th> 
 
      <th>description</th> 
 
     </tr> 
 
     <tr ng-repeat="x in cards | myFilter:filterProperty:filterData"> 
 
      <td>{{x.name}}</td> 
 
      <td>{{x.owner}}</td> 
 
      <td>{{x.des}}</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</body>

來源

2017-04-01 02:33:39 Lex

我做的是一個簡單的解決我的問題。但在我真正的應用程序中，如果我想使用自定義過濾器，我需要運行3循環，因爲我不顯示錶內的數據，該應用程序更類似於Github看板 - 我將需要使用1'st for循環查找特定的板卡>然後查找特定的類別>和特定的卡片。我認爲@Gaurav將是快速解決問題的方法。謝謝 –

濾波器通過在文本屬性specifiec

回答

相關問題