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

【问题标题】：Change class or opacity with AngularJS filter使用 AngularJS 过滤器更改类或不透明度
【发布时间】：2023-03-03 05:03:22
【问题描述】：

我正在使用 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

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

【问题讨论】：

你可以使用ng-class给没有选中的其他人添加css效果
@Niladri 这不是答案。请给我更详细的信息好吗？谢谢。
你可以在重复的div上使用ng-class来设置满足如下条件的css类ng-class="{checked: wine.category != 'your ng-model value of selected checkbox'}
其中checked 类有一些css，如下.checked { background-color: red; }
顺便说一句，如果你想全部显示它们，你必须删除这个过滤器filter:ctrl.filterByCategory

标签： javascript angularjs filter

【解决方案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

【讨论】：

【解决方案2】：

如 cmets 中所述，您当前的实现正在显示或隐藏匹配的项目 - 如果项目匹配，您需要修改指令以包括使用 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/

【讨论】：