0
我想在离子中做一个搜索栏,如果它类似于这个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当我们写“一个著名的”。相反,过滤器会导致列表中的所有项目消失。无论如何解决它?
这是链接http://plnkr.co/edit/d17dZDrlhY2KIfWCbKyZ?p=preview。我认为item参数是ng-repeat项目中的项目参数。 – LearningDummy