离子多重“选择”过滤器问题

Question

在我的 ionic 项目中，我有 3 个不同的过滤器来更改我的酒单项目。

如果我单独使用每个过滤器，每个过滤器都可以正常工作。

如果我同时使用两个过滤器，列表会根据最后选择的过滤器进行更新。

示例：我从 Grape Filter 中选择 Pinot Noir；

然后，我从区域过滤器中选择“阿根廷门多萨”；

但是在我最后一次选择之后，前一个仍然存在。 我希望它在选择区域过滤器后更改“所有葡萄类型”选择。

这是我的代码。

$scope.filteredList = category.children;

$scope.sort = 'price.byBottle';
$scope.reverse;
var sortByCategory;
var items;

var category = $scope.category;

fillGrapes();
fillCountries();

$scope.selectedGrape = $scope.grapeTypes[0];
$scope.selectedCountry = $scope.countries[0];

$scope.changeSort = function(value, ascending) {
   $scope.sort = value;
   $scope.reverse = ascending;
};

$scope.sortingTypes = [{
   id: 0,
   name: 'Sorting'
}, {
   id: 1,
   name: 'Artan Fiyat'
}, {
   id: 2,
   name: 'Azalan Fiyat'
}, {
   id: 3,
   name: 'Eskiden Yeniye'
}, {
   id: 4,
   name: 'Yeniden Eskiye'
}];

$scope.getBySortingType = function(type) {
   console.log('selected type', type);
   if (type.id == 0) {
      $scope.clearFilter();
   } else if (type.id == 1) {
      $scope.changeSort('price.byBottle', false);
   } else if (type.id == 2) {
      $scope.changeSort('price.byBottle', true);
   } else if (type.id == 3) {
      $scope.changeSort('properties.year', false);
   } else if (type.id == 4) {
      $scope.changeSort('properties.year', true);
   }
};

$scope.checkGrapeType = function(type) {
var i = null;

  for (i in $scope.grapeTypes) {
    if ($scope.grapeTypes[i].id == type.id) {
      return $scope.grapeTypes[i];
    }
  }
}

$scope.checkCountry = function(type) {
  var i = null;
  for (i in $scope.countries) {
    if ($scope.countries[i].id == type.id) {
      return $scope.countries[i];
    }
  }
}

$scope.getByGrapeType = function(grapeType) {
  if (grapeType.id == 0) {
    console.log('case0')
    //reload filteredList
    $scope.filteredList = category.children;
    console.log('reload filteredlist', $scope.filteredList);

    $scope.selectedCountry = $scope.countries[0];
    console.log('selectedCountry', $scope.selectedCountry);
  } else {
    console.log('case1');

    //reload filteredList
    $scope.filteredList = category.children;
    console.log('reload filteredlist', $scope.filteredList);

    //refilter filteredList
    $scope.filteredList = _.filter($scope.filteredList, function(item) {
      return item.properties.grapeType === grapeType.name;
    });
    console.log('refiltered filteredlist', $scope.filteredList);
  }
  $scope.selectedGrape = grapeType;
  console.log('selectedGrape', $scope.selectedGrape);
};
$scope.getByCountry = function(type) {
  if (type.id == 0) {
    console.log('case0')
    //reload filteredList
    $scope.filteredList = category.children;
    console.log('reload filteredlist', $scope.filteredList);
 } else {
   console.log('case1');
   //reload filteredList
   $scope.filteredList = category.children;
   console.log('reload filteredlist', $scope.filteredList);
   //refilter filteredList
   $scope.filteredList = _.filter($scope.filteredList, function(item) {
     return item.properties.region === type.name;
   });
   console.log('refiltered filteredlist', $scope.filteredList);
 }
 $scope.selectedCountry = type;
 console.log('selectedCountry', $scope.selectedCountry);
   };

   function fillCountries() {
 var countries = _.chain($scope.filteredList).pluck('properties.region').uniq().value(countries.unshift('All Regions');
 $scope.countries = _.map(countries, function(item, index) {
   return {
     id: index,
     name: item
   };
 });
   };

  function fillGrapes() {
var grapeTypes = _.chain($scope.filteredList).pluck('properties.grapeType').uniq().value();

grapeTypes.unshift('All Grape Types');
$scope.grapeTypes = _.map(grapeTypes, function(item, index) {
  return {
    id: index,
    name: item
  };
});
console.log('fillgrapes()', $scope.grapeTypes);
};

        $scope.clearFilter = function() {
            $scope.filteredList = category.children;
            console.log("Filter is Cleared", $scope.filteredList);
        };

还有，HTML 部分：

<div class="filterBox" style="width:100%; margin-top:1em; padding:0; height:4em;" clickable="false">
  <div class="row" style="padding:0; margin:0; width:100%;">
    <div class="col col-20" style="height:4em;">
        <i class="icon ion-funnel" style="float:left; width:100%; height:4em;"></i> 
    </div>
    <div class="col col-20" style="height:4em;">
       <select style="width:100%; left:0; right:0; margin:0; padding:0; height:3.7em; border:none; text-align:center;" ng-options="grapeType.name for grapeType in grapeTypes" ng-model="selected" ng-init="selected = checkGrapeType(selectedGrape)" ng-change="getByGrapeType(selected)"></select>
    </div>
    <div class="col col-20" style="height:4em;">
      <select style="width:100%; left:0; right:0; margin:0; padding:0; height:3.7em; border:none; text-align:center;" ng-model="selectedC" ng-options="country as country.name for country in countries" ng-init="selectedC = checkCountry(selectedCountry)" ng-change="getByCountry(selectedC)"></select>
    </div>
    <div class="col col-20">
       <select style="width:100%; left:0; right:0; margin:0; padding:0; height:3.7em; border:none; text-align:center;" ng-model="selectedSorting" ng-options="sorting as sorting.name for sorting in sortingTypes" ng-init="selectedSorting = sortingTypes[0]" ng-change="getBySortingType(selectedSorting)"></select>
    </div>
    <div class="col col-20">
       <button class="button button-outline button-dark" style="float:right;" ng-click="clearFilter()">
         <i class="icon ion-refresh"></i>
       </button>
    </div>
  </div>
</div>

第二次选择后，我希望前一个进入过滤器的第一次选择。

我该如何解决这个问题？

Answer 1

添加

$scope.clearFilter()

在checkGrapeType 和checkCountry 函数的请求下。