我怎样才能用ionicfilter bar过滤？

Question

我的观点是：

<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>

和我的控制员：

.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
            });
        }
    })

Answer 1

您可能会使用自定义指令来实现此目的。

查看

<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>

指令：

      .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();
                    }
                });
            }]
        };
      }])

希望这能帮到你!!