在桌面上用切换NG单击作品，但无法在手机上

Question

我有我的页面顶部的过滤器行。当点击，一个给定的过滤器过滤的结果，并得到强调（具体类）。当再次点击，类应该被清除，并在视觉上的过滤器是不选。

这适用于台式机正常，但在移动设备上，当我点击，过滤器被正确选择（和结果正确过滤），但是当我再次点击，过滤器保持选中状态，打破了用户体验。如果我在别的再次点击，过滤器完全得到未选择的，因为它应该 - 点击晚...;）

可能是什么问题？我试图安装ngTouch模块为好，但似乎并没有改变任何东西。

HTML：

section.filter-area
  .col-xs-3.filter-row(ng-repeat="flt in vm.filters")
    .filter(ng-click="vm.filter(flt)" ng-class="{'selected': flt.isSelected}")
      .filter-title {{flt.tag}}
      .filter-icon
        img.filters(src="{{flt.icon}}")

JS：

'use strict';

Controller.$inject = ['$http'];

function Controller($http) {
      /* other stuff */
      vm.filter = function(flt) {
      if (flt.isSelected === undefined) {
        flt.isSelected = false;
      }

      flt.isSelected = !flt.isSelected;

      if (flt.isSelected) {
        activeFilters += 1;        
        filterProducts(flt);
      } else {
        activeFilters -= 1;
        unselectFilter(flt);
      }
    }
}

Answer 1

这是一个矛盾的CSS条目。

我有悬停和选择的相同的规则，这是导致在移动的冲突，如移动不支持悬停。

.filter:hover, .filter:selected {
   background-color: #ccc;
   color:white;
}

因此，我提出一个媒体查询悬停规则，并且还应用本方案https://stackoverflow.com/a/6262682/169252

为了支持任何触控装置。