2014-08-27 179 views
0

不工作鑑於數據進行過濾:利用搜索輸入框的任何領域過濾器在angularjs

$scope.friends = [ 
    { "name": 'John', "phone": '555-1212', "age": 10, "name-phone-age":now.setMinutes(now.getMinutes() + 30) }, 
    { "name": 'Mary', "phone": '555-9876', "age": 19, "name-phone-age":now.setMinutes(now.getMinutes() + 30) }, 
    { "name": 'Mike', "phone": '555-4321', "age": 21, "name-phone-age":now.setMinutes(now.getMinutes() + 30) }, 
    { "name": 'Adam', "phone": '555-5678', "age": 35, "name-phone-age":now.setMinutes(now.getMinutes() + 30) }, 
    { "name": 'Julie', "phone": '555-8765', "age": 29, "name-phone-age":now.setMinutes(now.getMinutes() + 30) } 
    ]; 

濾鏡除了DATE域;

例如

Search : John 
Name Phone Number Age Some_Random_Date_Time 

John 555-1212 10 2014-08-27 20:24:40 540 

和搜索字符串2014是如圖的output data一部分,空的結果返回的日期

Name Phone Number Age Some Random Date Time 
John 555-1212 10 2014-08-27 20:24:40 540 
Mary 555-9876 19 2014-08-27 20:54:40 540 
Mike 555-4321 21 2014-08-27 21:24:40 540 
Adam 555-5678 35 2014-08-27 21:54:40 540 
Julie 555-8765 29 2014-08-27 22:24:40 540 


Search : 2014 
    Name Phone Number Age Some_Random_Date_Time 

EXAMPLE LINK

+0

那是因爲你的實際數據日期不是這種格式。您只是基於日期格式過濾器顯示它不會修改基礎數據 – PSL 2014-08-27 14:37:37

+0

@PSL:如果我需要基於輸出窗口上顯示的內容進行搜索,我該怎麼做?寫任何自定義過濾器? – 2014-08-27 14:39:10

+0

是或者在你的朋友對象中添加一個屬性來顯示格式化的日期..,這將是更合適的 – PSL 2014-08-27 14:41:41

回答

2

搜索過濾器實際工作精細。問題在於你的數據。過濾器處理綁定到它的數據。在您的示例中,只有您的顯示器使用日期格式過濾器以特定格式顯示日期。如果使用搜索過濾器,它會在迭代的列表上工作(並記住日期格式過濾器不會更新底層模型),所以要麼創建一個可以格式化方式處理日期的自定義過濾器。但在你的情況下,因爲你需要顯示格式化的日期,我只是格式化日期在模型本身。

//Add a new property or update the existing property, here i am adding a new one. 
    //Or just use friends.forEach 
    angular.forEach(friends, function(friend){ 
    friend.formattedDate = $filter('date')(friend['name-phone-age'],'yyyy-MM-dd HH:mm:ss'); 
    }) ; 

    $scope.friends = friends; 

現在從視圖中刪除不需要的過濾器,而是使用此字段。

<td>{{friend.formattedDate}}</td> 

Plnkr