javascript - 如何为对象制作过滤器？

Question

请帮助修复脚本。

PLUNKER

我制作新闻源。数据存储在 json 文件中。我以重复方式输出数据项。

html:

<input class="filter" type="text" ng-model="searchPhrase" placeholder="Фильтр по заголовку">

<div class="news-list" ng-if="!detailsShow">
<h2 class="md-display-1 ng-binding">список чего-то из json-файла</h2>
<input class="filter" type="text" ng-model="searchPhrase" placeholder="Фильтр по заголовку">

<ul class="news-list-inner">
  <li class="news-item" ng-repeat="(key, val) in news | filter:searchPhrase" ng-click="openDetails(key)">
    <div class="poster" style="background-image: url('{{newsImagesStoragepath}}{{val.poster}}');"></div>
    <div class="title">{{val.title}}</div>
    <div class="description">{{val.description | cutText:100}}</div>
  </li>
</ul>
</div>

Angular Controller :

function($rootScope, $scope, $timeout, $http) {
$scope.newsImagesStoragepath = '/';
$scope.detailsShow = false;

$scope.getNews = function() {
  $http.get('news.json')
    .then(function successCallback(resp){
      $scope.news = resp.data.values;
    }, function errorCallback(resp) {
      console.log('error', resp);
    });
};

$scope.getNews();
}

json(片段):

{
  "headers": {
    "title":{"title":"Заголовок","type":"text"},
    "description":{"title":"Описание","type":"text"},
    "poster":{"title":"Изображение","type":"file"}
  },
  "values":{
    "id1": {"title":"Lorem ipsum dolor sit.", "poster": "1.jpg", "description": "Lorem ipsum dolor sit amet, re."},
    "id2": {"title":"Sequi alias, cumque at.", "poster": "3.jpg", "description": "Architecto, placeat! C"},

我需要按标题的短语添加过滤器。但控制台显示以下错误消息:

angular.js:13920 Error: [filter:notarray] Expected array but received:

Answer 1

angular.js:13920 Error: [filter:notarray] Expected array but received:

当过滤器未与数组一起使用时，会发生此错误。 要按对象的属性值过滤对象，您可以创建自己的自定义过滤器。

根据您的情况，您可以像这样创建过滤器:

JS:

.filter('custom', function() {
  return function(input, search) {
    console.log(input, search);
    if (!input) return input;
    if (!search) return input;
    var expected = ('' + search).toLowerCase();
    var result = {};
    angular.forEach(input, function(value, key) {
      console.log(value);
      var actual = ('' + value.title).toLowerCase();
      if (actual.indexOf(expected) !== -1) {
        result[key] = value;
      }
    });
    return result;
  }
});

HTML:

ng-repeat="(key, val) in news |custom:searchPhrase"

此过滤器将根据您的要求按短语过滤标题。 Plunker Link (我对你的代码做了一些更改)