離子服務工廠中的過濾和分類

對新手問題感到抱歉。我想按名稱添加過濾和排序到我的頁面。當我嘗試使用此代碼時，我正在使用控制範圍，但我在使用services.js工廠之後，從變量的產品清單它仍然可以工作，在兩個問題：離子服務工廠中的過濾和分類

當我鍵入搜索單詞在搜索框中，過濾器是工作，只顯示過濾項目，但我無法再次清除過濾器（當我刪除搜索詞退格時，該項目仍然被過濾）
訂單不再工作了用於排序的項目

下面是代碼：（HTML）

<ion-view view-title="Foods"> 
    <ion-content class="padding"> 
     <div class="bar bar-header item-input-inset"> 
      <label class="item-input-wrapper"> 
       <i class="icon ion-ios-search placeholder-icon"></i> 
       <input type="search" placeholder="Search" ng-model="foodSearch.search"> 
      </label> 

     </div> 
     <button class="button button-block button-energized" ng-click="showOrderOptions()"> 
      Order by 
     </button> 
     <div class="list "> 


      <a class="item" href="#" ng-hide="isOrderOptionsHide" ng-click="reverse=!reverse;order('name',reverse)"> 
       Name 
      </a> 

      <a class="item" href="#" ng-hide="isOrderOptionsHide" ng-click="reverse=!reverse;order('rating',reverse)"> 
       Rating 
      </a> 

     </div> 
     <ion-list> 
     <ion-item class="list card" ng-repeat="food in foods = (foods | filter: filterFood)" 
      href="#/tab/foods/{{food.id}}"> 
      <div class="item item-head"> 
       <h2 style="text-align:center;"><b>{{food.name}}</b></h2> 
       <div class="row"> 
        <div class="col item item-image" style="width:100px;height:100px;"> 
         <img class="" src="{{food.imageSrc}}" > 
        </div> 
        <div class="col item item-image"> 
         <h2>{{food.title}}</h2> 
         <div class="row"> 
          <img src="img/smile.jpg" style="width:100%; height:100%; margin-top: -10px;"class="col col-40"> 
          <h3 class="col col-60" >{{food.rating}}</h3> 
         </div> 
        </div> 
       </div> 
      </div> 
     </ion-item> 
     </ion-list> 
    </ion-content> 
</ion-view>

（Controller.js）：

.controller('FoodsCtrl', function($scope,Foods,$filter) { 
    $scope.foods = Foods.all(); 
    $scope.remove = function(food) { 
     Foods.remove(food); 
    }; 

    $scope.foodSearch = {search: ''}; 

    $scope.filterFood = function (item){ 
     return item.title.toLowerCase().indexOf($scope.foodSearch.search.toLowerCase()) >= 0 
      || item.name.toLowerCase().indexOf($scope.foodSearch.search.toLowerCase()) >= 0; 
    } 

    $scope.isOrderOptionsHide = true; 
    $scope.reverse=true; 
    $scope.showOrderOptions = function(){ 
     $scope.isOrderOptionsHide = !$scope.isOrderOptionsHide; 
    } 
    var orderBy = $filter('orderBy'); 

    $scope.order = function(predicate, reverse) { 
     $scope.foods = orderBy($scope.foods, predicate, reverse); 
     $scope.isOrderOptionsHide = true; 
    }; 
})

來源

2015-08-25 user3582100

什麼是'filterFood' in''食物中的食物=（食物|過濾器：filterFood）「'，它在哪裏聲明？ –

只要做到這樣
ng-repeat="food in foods | filter: foodSearch.search | orderBy: 'name'"
你不必這樣做：
$scope.filterFood = function (item){ return item.title.toLowerCase().indexOf($scope.foodSearch.search.toLowerCase())..
角過濾automaticaly做到這一點。

來源

2015-08-25 15:39:56

非常感謝你的作品:) – user3582100

離子服務工廠中的過濾和分類

回答

相關問題