1

Я хочу отформатировать дату, а затем выполнить поиск из поля ввода. Я пытаюсь использовать конвертер, но по какой-то причине не работает поиск и мой фильтр разве работает либо вот мой скрипку примерпоиск не работает в угловых данных

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 формировать дату.

Благодаря

+0

Где используется пользовательский фильтр? –

+2

попробуйте это '

{{item.date }}
' –

ответ

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

Помните:

  • держать кон согласованность между форматом даты, используемым в формате searchFor, и формат даты, используемый для отображения таблицы.
  • добавить else if, чтобы применить поиск других данных, таких как добавленный else if (item.name.toLowerCase().indexOf(searchString) !== -1) { result.push(item);} для item.name.
+0

вот в чем проблема ..когда я добавляю еще один столбец. поиск работает только для одного столбца, а не по всему миру .... вот скрипка https://jsfiddle.net/wpd700pz/7/ – Autolycus

+0

в поиске других слов работает только для поля даты, и если я добавлю другое поле ... search не проходит ваш маршрут. – Autolycus

+0

Также, когда я ищу 05/02 или что-нибудь на день .... это тоже не работает ... см. Https://jsfiddle.net/wpd700pz/14/ – Autolycus

Смежные вопросы