フィルタ：notarray期待配列が、受信：0

Question

コントローラ

@RequestMapping(value = "/graphs", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE) 
    public Collection<Graph> getSkeletonGraph() 
    { 
     log.debug("REST request to get current graphs"); 
     return graphService.getSkeletonGraphs(); 
    } 

角度コール

$scope.graphs = []; 
    Graph.getGraphs().$promise.then(function(result) 
    { 
     $scope.graphs = result; 
    }); 



    angular.module('sampleApplicationApp').factory('Graph', function($resource) 
    { 
     return { 
     getGraphs: function() { 
      return $resource('api/graphs/:id').query(); 
     } 
    }; 
    }) 

フィルタを使用して、なぜ私はわからないが、私は例外を取得します。

もともと角度のある文書で見たhttps://docs.angularjs.org/error/filter/notarray 私の結果は配列ですが、なぜそのような例外が発生するのかわかりません。

バックエンドからのサンプル結果が表示されています。

[{"id":"135520b0-9e4b-11e5-a67e-5668957d0149","area":"Bingo","models":[],"enumerateds":[]},{"id":"0db925e0-9e53-11e5-a67e-5668957d0149","area":"jin","models":[],"enumerateds":[]},{"id":"7a717330-9788-11e5-b259-5668957d0149","area":"Product","models":[],"enumerateds":[]},{"id":"402d4c30-980f-11e5-a2a3-5668957d0149","area":"fgfgfg","models":[],"enumerateds":[]},{"id":"404b77b0-9e53-11e5-a67e-5668957d0149","area":"olah","models":[],"enumerateds":[]},{"id":"cd071b10-9e52-11e5-a67e-5668957d0149","area":"lolo","models":[],"enumerateds":[]},{"id":"d9808e60-9710-11e5-b112-5668957d0149","area":"catalog","models":[],"enumerateds":[]},{"id":"2aaca9f0-97e2-11e5-91cd-5668957d0149","area":"btg","models":[],"enumerateds":[]},{"id":"955e9ed0-978c-11e5-93fd-5668957d0149","area":"promotions","models":[],"enumerateds":[]},{"id":"1e441d60-980f-11e5-a2a3-5668957d0149","area":"hjuhh","models":[],"enumerateds":[]},{"id":"fb96dfe0-978d-11e5-93fd-5668957d0149","area":"voucher","models":[],"enumerateds":[]}] 

HTML

<li ng-repeat="g in graphs track by $index | filter:searchText"></li> 

Answer 1

あなたのフィルタを適用する前に、あなたがtrack by $indexを使用しているため、問題が発生しています。これを解決するには、あなたに式を変更：

<li ng-repeat="g in graphs | filter:searchText track by $index"></li> 

track by式は常に、すべてのフィルタの後、最後にする必要があります。ドキュメントに記載されたそのルール：ngRepeat

説明：

あなたはその

場合には、ある、使用されるすべてのフィルタの入力が配列である、 ngRepeatで track by $indexを使用していません

ng-repeat="item in items | filter1 | filter2", 

itemsは、デフォルトでフィルタに渡される入力であり、この入力に対してフィルタ処理が行われます。あなたがtrack by $indexを使用する場合

はしかし、フィルタへの入力は、代わりにitemsため、エラーの$index次のようになります。

Expected array(read: items) but received 0(read: $index).

したがって、これに対抗するために、配列が最初にすべてのフィルタを通過すると、フィルタリングされた結果はtrack by $indexと一緒に使用されます。

これはこれをクリアします。

Answer 2

あなたはいつも仕事にでトラックのng-repeat角度ニーズに最終的な結果のための式を評価しながら、以来表現

<li ng-repeat="g in graphs | filter:searchText track by $index"></li> 

の終わりにtrack byを使用する必要があります。最後に入力すると、フィルタが適用され、最終出力でtrack byが計算されます。あなたは角度のドキュメントでソースコードを見ることができます。

はng-repeat

If you are working with objects that have an identifier property, you should track by the identifier instead of the whole object. Should you reload your data later, ngRepeat will not have to rebuild the DOM elements for items it has already rendered, even if the JavaScript objects in the collection have been substituted for new ones. For large collections, this signifincantly improves rendering performance. If you don't have a unique identifier, track by $index can also provide a performance boost.