Ionic + AngularJS：ng-repeat 过滤器不适用于网格布局，但适用于列表答案

【问题标题】：Ionic + AngularJS: ng-repeat filter not working on grid layout but works in listIonic + AngularJS：ng-repeat 过滤器不适用于网格布局，但适用于列表
【发布时间】：2017-03-28 19:12:31
【问题描述】：

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

这是场景，我正在尝试制作一张卡片网格，并且能够按照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 数据中的前两个对象。

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

谢谢！

代码的Pluker链接：plnk code link

【问题讨论】：

制作一个 js 小提琴
尝试使用<input type="text" ng-model="search.name">进行搜索
试过了，我认为是卡片附带的条件
感谢您制作 plnkr @TheophilusOmoregbee .. 我还尝试删除附加到卡片的条件，它仍然是一样的。无论我在文本框中输入什么关键字，它都只返回前两项。
哇，让我好好看看

标签： javascript angularjs json ionic-framework

【解决方案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的参考

【讨论】：