角度データで検索が機能しません

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')); 
}); 

日付を入力すると、フィルタは適用されず、カスタムフィルタも動作しません。 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：CONを維持

• ：

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

  がjsfiddle

  はにを覚えておいてくださいを参照してください。 searchForで使用されている日付書式と表の表示に使用されている日付書式の間の整合性。

• else ifを追加して、else if (item.name.toLowerCase().indexOf(searchString) !== -1) { result.push(item);} のitem.nameのように他のデータを検索してください。