使用AngularJS過濾器更改類別或不透明度

我正在使用AngularJS過濾器，它的工作良好。見我的代碼：使用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

但我不想讓他人隱瞞，當我選擇一個項目。相反，我想改變別人的風格（不透明或其他）。我需要做什麼？

來源

2017-09-24 Jelaloy

可以使用納克級添加CSS效果，其他沒被選 – Niladri

@Niladri這不是一個答案。你能給我更多的細節嗎？謝謝。 – Jelaloy

你可以在重複的div上使用ng-class來設置滿足如下條件的css類：'ng-class =「{checked：wine.category！='你選擇的複選框的ng-model值'} – Niladri

如前所述，使用您的方法時，不能僅更改樣式。您的方法是添加/刪除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

來源

2017-09-24 18:16:46

如評論中所述，您當前的實施顯示或隱藏了匹配項目 - 您需要修改您的指令，以包括如果項目匹配時使用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/

來源

2017-09-24 18:24:00 Stevangelista

使用AngularJS過濾器更改類別或不透明度

回答

相關問題