2016-10-21 3 views
0

スクリプトを修正するのを手伝ってください。オブジェクトのフィルタを作成する方法は?

PLUNKER

私はニュースフィードを作ります。 json-fileに保存されたデータ。私は繰り返しでデータ項目を出力します。

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> 

角度コントローラ:

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:

答えて

2

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(コードにいくつか変更を加えました)

関連する問題