搜索不能在角度數據中工作

Question

我想格式化日期，然後從輸入框中搜索。我試圖用一個轉換器，但由於某種原因不能進行搜索工作，在這裏我的過濾器的心不是工作要麼 是我的小提琴例子

https://jsfiddle.net/U3pVM/25662/

這裏是我的代碼

<div ng-app='app'> 
    <h2>Todo</h2> 
    <div ng-controller="TodoCtrl"> 
    <form> 
     <div class="form-group"> 
     <div class="input-group"> 
      <div class="input-group-addon"><i class="fa fa-search"></i></div> 
      <input type="text" class="form-control" ng-model="search"> 
     </div> 
     </div> 
    </form> 

    <div ng-repeat="item in data"> 
    {{item.date }} 
    </div> 
    </div> 
</div> 

這裏是我的控制器

var app = angular.module('app', []); 
app.controller('TodoCtrl', function ($scope) { 

     $scope.data = [ 
    { 
    name_object: "my Object", 
    date: "2016-05-01 20:00:00", 
    id: "123", 
    name: "xy kaj Pl" 
    }, 
    { 
    name_object: "my Object2", 
    date: "2014-15-01 20:10:00", 
    id: "143", 
    name: "Rose Jack" 
    }, 
    { 
    name_object: "my Object3", 
    date: "2015-17-01 04:00:00", 
    id: "143", 
    name: "John Smith" 
    }, 
    { 
    name_object: "my Object4", 
    date: "2016-18-01 04:00:00", 
    id: "142", 
    name: "Barbara Francis" 
    } 
] 
}); 

$scope.dateFormat = function(string){ 
    return isoDate(string); 
    }; 
app.filter('isoDate', function(string){ 
    return new Date(string.split(' ').join('T')); 
}); 

當我輸入日期時，它不會過濾，也是我的自定義過濾器不工作t o合成日期。

感謝

Answer 1

搜索問題

因爲它顯示例如在filter angular docs你可以使用搜索過濾器如下：

<div ng-repeat="item in data | filter:search:strict"> 
    {{item.date }} 
</div> 

見jsfiddle

格式化問題

準備過濾器如下：

app.filter('isoDate', function() { 
    return function(input) { 
    return new Date(input.split(' ').join('T')); 
    }} 
); 

用法：用這樣的方式

<div ng-repeat="item in data | filter:search:strict"> 
    {{item.date | isoDate | date : 'yyyy-MM-dd hh:mm:ss'}} 
</div> 

過濾器隻影響顯示日期的方式，並沒有影響到搜索，因此，如果您將使用比yyyy-MM-dd hh:mm:ss不同的日期格式即MM/dd/y搜索將以數據格式工作，過濾器會影響顯示的方式。會有失誤。搜索將起作用，即05-02（將顯示05/02/2012）。見jsfiddle。使用自定義搜索過濾器來保持顯示和搜索日期格式的一致性。

定製搜索過濾

app.filter('searchFor', function($filter) { 
    return function(arr, searchString) { 
     if (!searchString) { 
      return arr; 
     } 
     var result = []; 
     searchString = searchString.toLowerCase(); 
     angular.forEach(arr, function(item) { 
      var itemDateInFormat = $filter('date')(new Date(item.date.split(' ').join('T')), 'MM/dd/y'); 
      if (itemDateInFormat.indexOf(searchString) !== -1) { 
       result.push(item); 
      } else if (item.name.toLowerCase().indexOf(searchString) !== -1) { 
       result.push(item); 
      } 
     }); 
     return result; 
    }; 
}); 

HTML：

<tr ng-repeat="item in data | searchFor:search"> 
    <td> {{item.date | isoDate | date : 'MM/dd/y'}}</td> 
    <td> {{item.name}}</td> 
</tr> 

見jsfiddle

記住：

• 保持CON在searchFor過濾器中使用的日期格式與用於顯示錶格的日期格式之間的一致性。
• 加else if可應用搜索其他數據，如添加else if (item.name.toLowerCase().indexOf(searchString) !== -1) { result.push(item);} 爲item.name。