如何過濾離子過濾條？

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

你可能會使用自定義的指令來實現這個..

VIEW

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

希望這個井幫助你！