Question

我使用AngularJS过滤器，效果很好。看我的代码：

(function () {'use strict';

angular.
  module('myApp', []).
  controller('WineCtrl', WineCtrl);

// Functions - Definitions
function WineCtrl() {
  // Variables - Private
  var self = this;

  // Variables - Public
  self.filter = {};
  self.wines = [
    {name: 'Wine A', category: 'red'},
    {name: 'Wine B', category: 'red'},
    {name: 'Wine C', category: 'white'},
    {name: 'Wine D', category: 'red'},
    {name: 'Wine E', category: 'red'},
    {name: 'Wine F', category: 'white'},
    {name: 'Wine G', category: 'champagne'},
    {name: 'Wine H', category: 'champagne'}    
  ];

  // Functions - Public
  self.filterByCategory = filterByCategory;
  self.getCategories = getCategories;

  // Functions - Definitions
  function filterByCategory(wine) {
    return self.filter[wine.category] || noFilter(self.filter);
  }

  function getCategories() {
    return (self.wines || []).
      map(function (wine) { return wine.category; }).
      filter(function (wine, idx, arr) { return arr.indexOf(wine) === idx; });
  }

  function noFilter(filterObj) {
    return Object.
      keys(filterObj).
      every(function (key) { return !filterObj[key]; });
  }
}

}());

DEMO

但是当我选择一个项目时，我不希望其他人隐藏。相反，我想改变其他人的风格（不透明度或其他）。我该怎么办？

Answer 1

如上所述，使用您的方法时，您无法仅更改样式。您的方法是从DOM添加/删除元素，因此您无法更改其样式。为了做你想做的事，你需要显示所有元素并使用你的过滤函数来添加和删除CSS类：

function filterByCategory(wine) {
    return (self.filter[wine.category] || noFilter(self.filter))? 'show':'hide';
}

并像这样使用它：

<div ng-repeat="wine in ctrl.wines">
  <div class="{{ctrl.filterByCategory(wine)}}">
  {{ wine.name }} <i>({{ wine.category }})</i>
  </div>
</div>

Demo Using Opacity

Answer 2

如评论中所述，您当前的实现是显示或隐藏匹配项 - 您需要修改指令以包括使用ng-class在项目匹配时分配类;然后在该类的CSS中按照您的意愿设置项目。

以下是ng-repeat的修订版：

<div ng-repeat="wine in ctrl.wines">
    <span ng-class="{'matched': ctrl.filter[wine.category]}">{{ wine.name }} <i>({{ wine.category}})</i></span>
  </div>

快速定义为与您的过滤条件匹配的所有项目分配的matched类：

.matched {color:red}

在此示例中，匹配项的字体颜色设置为红色。您还可以取消不必要的filterByCategory和noFilter功能，保持代码清洁。

您可以在此处查看完整的工作版本：http://jsfiddle.net/fteo3ugd/

使用AngularJS过滤器更改类或不透明度

2 个答案: