Ionic + AngularJS：ng-repeat過濾器不適用於網格布局，但可以在列表中使用

Question

我目前正在學習使用ionic v1和angular構建應用程序。

在這種情況下，我正在嘗試制作一張紙牌，並能夠按照此鏈接上的教程進行操作。

我能夠使用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數據中顯示前兩個對象。

如果將視圖更改為列表，則過濾器可以工作，但是需要在視圖上應用網格樣式。

謝謝！

代碼的Pluker鏈接： plnk代碼鏈接

Answer 1

網格布局的問題是，您在一行中而不是在列中使用ng-repeat，因此當搜索項在特定項之中時，它會返回整行，因為那是您項所在的位置。 所以我創建了一個代碼來幫助您在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>

這應該為您工作所需。 這是這個答案的演示運行演示參考