2016-05-24 3 views
0

フィルタリング:私の見解では私はこのような構造を有する私のアプリでネストされた配列

[ ["section title", [{ item }, { item } ... ]], 
    ["section title", [{ item }, { item } ... ]], ... and so on 

を、私はリストにパネルにセクションを配置し、その内部のリスト:

<div class="panel panel-default" ng-repeat="section in index"> 
    <div class="panel-heading"><strong>{{section[0]}}</strong></div> 
    <ul class="list-group"> 
    <li class="list-group-item" ng-repeat="item in section[1]"> 
     ... item view here 

しかし、今では検索を追加したいので、検索結果に内部配列の項目のみを含めるようにします。私は、...トップレベルにフィルタ機能を入れ

ng-repeat="section in index | filter:matching()" 

matching()機能は、検索に一致するセクション内のアイテムのフラットリストを生成していますが、HTMLは断面構造を処理するように設定されていることができます平らなリストではありません。私は何をすべきか?

  1. 私のフィルタは断面構造で結果を生成しますが、時には空のセクション(項目が一致しない場合)があり、空のセクションを非表示にしますか? HTMLで何とか

  2. 修正して、このようなものは...

    <div ng-if="searchText"> 
        --- I don't know what goes here 
    </div> 
    <div ng-if="!searchText"> 
        --- same as above 
    

    この第二のアイデアは私にひどいようです。私は

を欠けている賢い

  • サムシング(うまくいけば)感謝。

  • 答えて

    0

    Theoratically、次のコードは、あなたのために働く必要があります(それは私のために働いていた)

    <div class="panel panel-default" ng-repeat="section in index | filter:matching()"> 
        <div class="panel-heading" ng-if="!searchText"><strong>{{section[0]}}</strong></div> 
        <ul class="list-group"> 
        <li class="list-group-item" ng-repeat="item in section[1]"> 
         ... item view here 
    

    これは、複数のdivおよびULタグを作成しますが、あなたは常にこの

    <ul class="list-group"> 
        <li ng-repeat-start="section in index | filter:matching()" style="display:none"></li> 
        <li class="list-group-item" ng-repeat="item in section"> 
         ... item view here 
        </li> 
        <li ng-repeat-end style="display:none"></li> 
    </ul> 
    
    を使用することができますが
    関連する問題