离子

Question

我试图在离子中创建一个搜索栏，如果它与此example相似。

这是app.html

<ion-content class="has-header" padding="true" ng-controller="appCtrl">
//Search Bar
<label class="item item-input">
    <i class="icon ion-search placeholder-icon"></i>
    <input type="search" placeholder="Search" ng-model="searchText">
</label>

//This is the list that we want to search
<form style="" class="list">
    <ion-list>
      <ion-item ng-repeat="item in items | filter: userFilter() ">
        <div class="row responsive-sm">
          <div class="col">
            <div>Item Id {{item.id}}</div>
            <div>Item detail{{item.detail}}</div>
            <div>Date{{item.date}}</div>
          </div>
        </div>
      </ion-item>
    </ion-list>
  </form>
</ion-content>

这是controller.js

.controller('appCtrl', function($scope,$state,$location,$ionicModal,$filter) {
$scope.items = [               
                            {
                               id        : 1 ,
                               detail    : "A book about ghost",
                               date      : "20 March 1999"
                            },
                            {
                               id        : 2,
                               detail    : "A Book about famous person",
                               date      : "20 March 1999"
                            },
                            {
                               id        : 3,
                               detail    : "A Map to a house",
                               date      : "20 March 1999"
                            },
                            {
                              id        : 4,
                               detail    : "A famous horror Novel",
                               date      : "20 March 1999"
                            },
                             {
                              id        : 5,
                               detail    : "A story about the haunted house",
                               date      : "20 March 1999"

                            }];
//The filter that is used
$scope.userFilter = function(item) {
  // default to no match
  var isMatch = false;

  if ($scope.searchText) {
    // split the input by space
    var parts = $scope.searchText.split(' ');

    // iterate each of the words that was entered
    parts.forEach(function(part) {
      // if the word is found in the post, a set the flag to return it.
      if (new RegExp('part').test(item)) {
        isMatch = true;
      } 
    });
  } else {
    // if nothing is entered, return all posts
    isMatch = true;
  }

  return isMatch;};})

如果代码正常工作，它应该在我们写“着名”时显示第2项和第4项。相反，过滤器会导致列表中的所有项目消失。无论如何要解决它？

Answer 1

似乎你已经在ng-repeat过滤器中调用了该函数没有参数的userFilter（）和你有项目参数的函数请确认这是不是问题我可以尝试你的plunkr也缺少你的示例链接。

祝你好运