Javascript 离子服务工厂的过滤与分选

对不起，我是新手。我想在我的页面中添加过滤和按名称排序。当我尝试使用此代码时，当我在controller作用域中使用variable中的项目列表时，它仍然有效，但在我在services.js中使用factory之后，有两个问题：

当我在搜索框中键入搜索词时，过滤器起作用，仅显示筛选的项目，但我无法再次清除过滤器（当我使用退格删除搜索词时，项目仍被筛选）

order by不再用于对项目进行排序

代码如下： （HTML）

---

只需这样做

ng repeat=“食物中的食物”过滤器：foodSearch.search | orderBy:“name”

您不必这样做：

$scope.filterFood=函数（项）{
return item.title.toLowerCase（）.indexOf（$scope.foodSearch.search.toLowerCase（））…

---

角度过滤器可以自动完成这一功能。

只需这样做

ng repeat=“食物中的食物”过滤器：foodSearch.search | orderBy:“name”

您不必这样做：

$scope.filterFood=函数（项）{
return item.title.toLowerCase（）.indexOf（$scope.foodSearch.search.toLowerCase（））…

---

角滤器自动执行此操作。

食品中的食品=（食品|过滤：过滤食品）中的什么是过滤食品，在哪里声明？食品中的食品=（食品|过滤：过滤食品）中的什么是过滤食品，在哪里声明？

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