Ionic + AngularJS：ng-repeat过滤器不适用于网格布局，但可以在列表中使用

Question

I am currently learning building apps with ionic v1 and angular.

Here's the scenario, I'm trying to make a grid of cards and was able to do it by following the tutorial on this link .

I was able to populate the grid with cards using json data. However, I also need to add a search box in order to filter the results. I used angularJS ng-repeat filter on the view but it is not filtering it correctly.

here's my code:

 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();
})

and here's the code for my view

<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>

when I type something on the search text box it always shows the first two object in the JSON data.

If I change the view into a list the filter works, however it is required to apply the grid styling on the view.

Thanks!

Pluker link of the code : plnk code link

Answer 1

The problem with your grid layouting is that you are using the ng-repeat in a row instead of the columns so when the search item is among a particular it returns the full row because thats where your item is located. so i created a code to help you sort it in plnk where i used the ng-repeat in a column instead of the row and added a style to the row to make it break which is this

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>

That should work for you as needed. here is the demo running demo reference from this answer