Ionic + AngularJS：ng-repeatフィルターはグリッドレイアウトでは機能しませんがリスト内で動作します

Question

現在、ionic v1と角度のあるビルディングアプリケーションを学習しています。

ここにシナリオがあります。私はカードのグリッドを作ろうとしており、このlinkのチュートリアルに従うことでそれを行うことができました。

jsonデータを使用してグリッドにカードを設定することができました。しかし、結果をフィルタリングするために検索ボックスを追加する必要もあります。ビューでangularJS ng-repeatフィルタを使用しましたが、正しくフィルタリングしていません。

は、ここに私のコードです：

angular.module('starter') 

.factory('Disasters', function() { 
    var disasters= [{ 
     id: 0, 
     name: 'Earthquake', 
     face: 'img/earthquake/thumbs.PNG', 
    }, { 
     id: 1, 
     name: 'Flash Floods', 
     face: 'img/flood/thumbs.png', 
    }, { 
     id: 2, 
     name: 'Typhoon', 
     face: 'img/typhoon/thumbs.png', 
    }, { 
     id: 3, 
     name: 'Avalanche', 
     face: 'img/avalanche/thumbs.png', 
    }]; 

    return { 
    all: function() { 
     return disasters; 
    }, 
    remove: function(disaster) { 
     disasters.splice(disasters.indexOf(disaster), 1); 
    }, 
    get: function(disasterID) { 
     for (var i = 0; i < disasters.length; i++) { 
      if (disasters[i].id === parseInt(disasterID)) { 
     return disasters[i]; 
    } 
    } 
    return null; 
    } 
}; 
}) 


.controller('DisasterCtrl', function($scope,$state,$ionicSideMenuDelegate,Chats,Facts){ 

    $scope.disasters = Disasters.all(); 
}) 

、ここで私の見解

<ion-content> 
    <input type="text" ng-model="search"> 
    <div ng-repeat="disaster in disasters | filter: search" ng-if="$index % 2 === 0"> 
    <div class="row"> 
     <div class="col col-50 no-padding" ng-if="$index < disasters.length"> 
     <div class="list card card-cell"> 
     <div class="item item-image background-image" back-img="{{disasters[$index].slider[0].image}}"> 
      </div> 
     <div class="item item-avatar" ng-click="href({{disasters[$index].id}})"> 
      <p class="bold uppercase font12">{{disasters[$index].name}}</p> 
     </div> 
     </div> 
    </div> 

    <div class="col col-50 no-padding" ng-if="$index < disasters.length"> 
     <div class="list card card-cell"> 
     <div class="item item-image background-image" back-img="{{disasters[$index + 1].slider[0].image}}"> 
      </div> 
     <div class="item item-avatar" ng-click="href({{disasters[$index + 1].id}})"> 
      <p class="bold uppercase font12">{{disasters[$index + 1].name}}</p> 
     </div> 
     </div> 
    </div> 
    </div> 

    </div>  
</ion-content> 

のコードだ私は、検索テキストボックスに何かを入力すると、それは常にJSONデータの最初の2つのオブジェクトを示しています。

ビューをリストに変更すると、フィルタは機能しますが、ビューにグリッドスタイリングを適用する必要があります。

ありがとうございます！

コードの

Plukerリンク：検索項目は、特定の間であるときplnk code linkが

Answer 1

あなたのグリッドレイアウト機能に問題があなたの代わりに、列の行にNGリピートを使用していることである

はそれがフルを返しますこれはあなたの商品がどこにあるからですか？だから、plnkで並べ替えるのに役立つコードを作成しました。ここでは、行の代わりに列のng-repeatを使用し、行にスタイルを追加してこれを破りました。

class = "row "style =" flex-wrap：wrap; "必要に応じてあなたのために働く必要があります

Input: <input type="text" ng-model="search.name" style="border:1px solid #ccc"> 

<br> 
<div class="row" style="flex-wrap: wrap;" > 
    <div class="col col-50 no-padding" ng-repeat="disaster in disasters | filter: search" > 
     {{$index}} 
     <div class="list card card-cell"> 
     <div class="item item-image background-image" back-img="{{disaster.slider[0].image}}"> 
      </div> 
     <div class="item item-avatar" ng-click="href({{disaster.id}})"> 
      <p class="bold uppercase font12">{{disaster.name}}</p> 
     </div> 
     </div> 

    </div> 
</div> 

。ここでは、このanswer