2014-10-03 45 views
0

我有很簡單的html表,我想要使用幾個輸入字段進行過濾。使用這種結構,我期望幾個填充的輸入將作爲交叉點,我只會看到兩個條件都很詳細的細節。但目前它以聯合方式工作,所以我看到任何與任何輸入文本匹配的細節。在閱讀互聯網時,我發現大多數人都遇到了落後的問題 - 當類似的代碼用作交集時。所以我失去了默認的行爲,以及解決我的任務的正確方法是什麼。Angularjs基本過濾工作作爲聯合而不是交集

HTML(我用的前4個輸入濾波和具有在JS部分過濾無特殊代碼):

<div class="row" ng-controller="ItemController as ItemCtrl"> 
<input type="text" placeholder="Search" ng-model="searchText.$"> 
<input type="text" placeholder="SubmittedBy" ng-model="searchText.fields.submitted_by"> 
<input type="text" placeholder="Description" ng-model="searchText.fields.description"> 
<input type="text" placeholder="Responsible" ng-model="searchText.fields.responsible"> 

<div class="table-responsive"> 
    <table class="table table-striped table-hover" id="tickets"> 
     <thead> 
     <tr> 
      <th><input type="checkbox" ng-model="selectedAll" ng-change="checkAll()" /></th> 
      <th>#</th> 
      <th>SubmittedBy</th> 
      <th>Description</th> 
      <th>Responsible</th> 
      <th>DateToFix</th> 
      <th>DateFound</th> 
      <th>Fixed</th> 
      <th>DateFixed</th> 
      <th>Confirmed</th> 
      <th>DateConfirmed</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="item in items | filter:(searchText||undefined)" id="{[{item.pk}]}" class="base" ng-class="{'info' : item.fields.fixed && !item.fields.confirmed, 'success' : item.fields.confirmed}"> 
      <td><input type="checkbox" ng-model="item.selected"></td> 
      <td>{[{item.pk}]}</td> 
      <td>{[{item.fields.submitted_by}]}</td> 
      <td>{[{item.fields.description}]}</td> 
      <td>{[{item.fields.responsible}]}</td> 
      <td>{[{item.fields.date_to_fix | date:'EEEE, MMM d, y'}]}</td> 
      <td>{[{item.fields.date_found | date:'EEEE, MMM d, y HH:mm:ss'}]}</td> 
      <td><input type="checkbox" ng-model="item.fields.fixed" ng-change="ItemCtrl.fix(item.pk, item.fields.fixed)"></td> 
      <td>{[{item.fields.date_fixed | date:'EEEE, MMM d, y HH:mm:ss'}]}</td> 
      <td><input type="checkbox" ng-model="item.fields.confirmed" ng-change="ItemCtrl.confirm(item.pk, item.fields.confirmed)"></td> 
      <td>{[{item.fields.date_fix_confirmed | date:'EEEE, MMM d, y HH:mm:ss'}]}</td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

我不認爲我的數據從服務器得到的是有關在這裏,但如果需要,我會在這裏發佈。考慮到:

(SEARCHTEXT ||未定義)

我是用它與複選框過濾柱(全部檢查,未選中),有或沒有「不確定」的工作相同。

這裏是有plunker鏈接,我的例子:http://plnkr.co/edit/22M3Nsl36OAK2aLrJz6T?p=info 我發現,只要我排除「田」字典從「數據」和使用價值我的問題dissappeares喜歡這樣的:

 <td>{{item.submitted_by}}</td> 
     <td>{{item.description}}</td> 
     <td>{{item.responsible}}</td> 

但這是我不想做的,因爲我不得不在服務器端進行更改。

+0

你可以提供一個plunker或一個複製問題的可運行代碼片段? – bmleite 2014-10-03 09:58:01

+0

@bmleite我把它放在我的問題的文本中,也找到了這種行爲的原因,但目前無法解決這個問題 – Oleg 2014-10-03 11:03:02

回答

2

當您將搜索表達式與嵌套對象一起使用時,Angular將在已過濾列表中返回與來自嵌套對象的至少一個屬性匹配的所有項目。

舉例來說,如果你有這樣的搜索對象:在項目列表

{ 
    fields: { 
    propA: 'bananas', 
    propB: 'apples' 
    } 
} 

和對象是這樣的:

{ 
    fields: { 
    propA: 'orange', 
    propB: 'apples' 
    } 
} 

該對象將被過濾器的返回匹配(儘管fields.propA不匹配)。

由於沒有記錄,我不確定這是否是預期的行爲或可能的錯誤。然而你有辦法來避免這個問題,只是定義自己的比較

var comparator = function(actual, expected) { 
    if (actual && expected && typeof actual === 'object' && typeof expected === 'object') { 
     var res = true; 
     for (var key in expected) { 
      if (key.charAt(0) !== '$' && hasOwnProperty.call(actual, key)) { 
       res = res && comparator(actual[key], expected[key]); 
      } 
     } 
     return res; 
    } 
    expected = (''+expected).toLowerCase(); 
    return (''+actual).toLowerCase().indexOf(expected) > -1; 
}; 
$scope.comparator = comparator; 

,然後在HTML:

ng-repeat="item in items | filter:searchText:comparator" 

Demo plunker

+0

就是這樣,謝謝! – Oleg 2014-10-08 08:48:58