javascript - ionic + AngularJS : ng-repeat filter not working on grid layout but works in list

Question

我目前正在学习使用 ionic v1 和 Angular 构建应用程序。

这是场景，我正在尝试制作卡片网格，并且能够按照此 link 上的教程来完成此操作。 。

我能够使用 json 数据用卡片填充网格。但是，我还需要添加一个搜索框来过滤结果。我在 View 上使用了 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();
})

这是我的 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>

当我在搜索文本框中键入内容时，它始终显示 JSON 数据中的前两个对象。

如果我将 View 更改为列表，则过滤器可以工作，但是需要在 View 上应用网格样式。

谢谢!

代码的Pluker链接:plnk code link

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>

这应该适合您的需要。这是运行的演示 demo引用从这里answer