Android 如何使用ionicfilter栏进行过滤？

我的看法是：

<ion-view title="Dinner">
    <ion-nav-buttons side="right">
        <button class="button button-icon icon ion-ios-search-strong" ng-click="filterBar()">
        </button>
    </ion-nav-buttons>
    <ion-content>
        <ion-list class="list-card" ng-repeat="datas in data | filter:query">
            <ion-item class="item item-avatar" href="#/dinner/{{datas.nom}}">
                <img ng-src="{{datas.image}}" />
                <h2>{{datas.nom | uppercase}}</h2>
                <p>{{datas.description | limitTo : 20}}...</p>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

{{datas.nom}大写}
{{datas.description}limito:20}

和我的控制器：

.controller('dinnerController', function ($ionicFilterBar, $scope, $http, $state, $ionicLoading) {
        $ionicLoading.show({
            template: '<ion-spinner></ion-spinner>',
            noBackdrop: true,
            duration: 8000
        });

        $http.get('js/restaurant.json').success(function (response) {
            $ionicLoading.hide();
            $scope.data = response;
            $scope.detail = $state.params.detail;
        }).error(function (error) {
            console.log(error);
            $ionicLoading.show({
                template: 'erreur de chargement...',
                noBackdrop: true,
                duration: 3000
            });
        });
        $scope.filterBar = function () {
            $ionicFilterBar.show({
                   // need a help
            });
        }
    })

.controller（'dinner controller'，函数（$ionicFilterBar、$scope、$http、$state、$ionicLoading）{
$ionicLoading.show({
模板：“”，
noBackdrop：没错，
持续时间：8000
});
$http.get（'js/restaurant.json'）.success（函数（响应）{
$ionicLoading.hide（）；
$scope.data=响应；
$scope.detail=$state.params.detail；
}).错误（函数（错误）{
console.log（错误）；
$ionicLoading.show({
模板：'erreur de chargement…'，
noBackdrop：没错，
持续时间：3000
});
});
$scope.filterBar=函数（）{
$ionicFilterBar.show({
//需要帮忙吗
});
}
})

您可以使用自定义指令来实现此功能

查看

<ion-view title="Dinner">
         <search-bar ng-model="query"></search-br>
          <ion-content>
              <ion-list class="list-card" ng-repeat="datas in data | filter:query">
                  <ion-item class="item item-avatar" href="#/dinner/{{datas.nom}}">
                      <img ng-src="{{datas.image}}" />
                      <h2>{{datas.nom | uppercase}}</h2>
                      <p>{{datas.description | limitTo : 20}}...</p>
                  </ion-item>
              </ion-list>
          </ion-content>
      </ion-view>

{{datas.nom}大写}
{{datas.description}limito:20}

指令：

      .directive('searchBar', [function () {
        return {
            scope: {
                ngModel: '='
            },
            require: ['^ionNavBar', '?ngModel'],
            restrict: 'E',
            replace: true,
            template: '<ion-nav-buttons side="right">'+
                            '<div class="searchBar">'+
                                '<div class="searchTxt" ng-show="ngModel.show">'+
                                    '<div class="bgdiv"></div>'+
                                    '<div class="bgtxt">'+
                                        '<input type="text" placeholder="Procurar..." ng-model="ngModel.txt">'+
                                    '</div>'+
                                '</div>'+
                                '<i class="icon placeholder-icon" ng-click="ngModel.txt=\'\';ngModel.show=!ngModel.show"></i>'+
                            '</div>'+
                        '</ion-nav-buttons>',

            compile: function (element, attrs) {
                var icon=attrs.icon
                        || (ionic.Platform.isAndroid() && 'ion-android-search')
                        || (ionic.Platform.isIOS()     && 'ion-ios7-search')
                        || 'ion-search';
                angular.element(element[0].querySelector('.icon')).addClass(icon);

                return function($scope, $element, $attrs, ctrls) {
                    var navBarCtrl = ctrls[0];
                    $scope.navElement = $attrs.side === 'right' ? navBarCtrl.rightButtonsElement : navBarCtrl.leftButtonsElement;

                };
            },
            controller: ['$scope','$ionicNavBarDelegate', function($scope,$ionicNavBarDelegate){
                var title, definedClass;
                $scope.$watch('ngModel.show', function(showing, oldVal, scope) {
                    if(showing!==oldVal) {
                        if(showing) {
                            if(!definedClass) {
                                var numicons=$scope.navElement.children().length;
                                angular.element($scope.navElement[0].querySelector('.searchBar')).addClass('numicons'+numicons);
                            }

                            title = $ionicNavBarDelegate.getTitle();
                            $ionicNavBarDelegate.setTitle('');
                        } else {
                            $ionicNavBarDelegate.setTitle(title);
                        }
                    } else if (!title) {
                        title = $ionicNavBarDelegate.getTitle();
                    }
                });
            }]
        };
      }])

.directive（'searchBar'，[function（）{
返回{
范围：{
ngModel:“=”
},
要求：[“^ionNavBar”、“？ngModel”]，
限制：'E'，
替换：正确，
模板：“”+
''+
''+
''+
''+
''+
''+
''+
''+
''+
'',
编译：函数（元素、属性）{
var icon=attrs.icon
||（ionic.Platform.isAndroid（）&&“ionandroid搜索”）
||（ionic.Platform.isIOS（）&&&“ion-ios7-search”）
||“离子搜索”；
angular.element（元素[0]。查询选择器（'.icon'））.addClass（icon）；
返回函数（$scope、$element、$attrs、ctrls）{
var navBarCtrl=ctrls[0]；
$scope.navElement=$attrs.side=='right'？navBarCtrl.rightButtonsElement:navBarCtrl.leftButtonsElement；
};
},
控制器：['$scope'，'$ionicNavBarDelegate'，函数（$scope，$ionicNavBarDelegate）{
var标题，定义类别；
$scope.$watch（'ngModel.show'，函数（显示、旧值、范围）{
如果（显示！==oldVal）{
如果（显示）{
如果（！definedClass）{
var numicons=$scope.navElement.children（）.length；
angular.element（$scope.navElement[0].querySelector（'.searchBar'））.addClass（'numicons'+numicons）；
}
title=$ionicNavBarDelegate.getTitle（）；
$ionicNavBarDelegate.setTitle（“”）；
}否则{
$ionicNavBarDelegate.setTitle（title）；
}
}如果（！title）则为else{
title=$ionicNavBarDelegate.getTitle（）；
}
});
}]
};
}])

希望这对你有帮助

请参考这个