如何在 AngularJS 中应用动态过滤器

Question

我现在开始学习 AngularJS，但过滤器有一些问题。 我需要应用两种类型的过滤器，但我不知道如何。

我有一个设备列表 JSON，如下所示：

[{
    "ID": 1,
    "Name": "Device 1",
    "Price": 1998.92,
    "Colors": [{
        "ColorCode": "Red",
        "ColorName": "#FF0000"
    },
    {
        "ColorCode": "Green",
        "ColorName": "#2EFE2E"
    }],
    "Type": {
        "TypeID": 1,
        "TypeName": "Mobile device"
    },
    "Company": {
        "CompanyID": 1,
        "CompanyName": "Alcatel"
    }
}]

我这样显示列表：

<div ng-repeat="device in devices | filter:companyFilters | filter:colorFilters">
    <span>{{device.Company.CompanyID}}</span> // 1
    <span>{{device.Company.CompanyName}}</span> // Google
    <span>{{device.Name}}</span> // Nexus 6P
</div>

我应用了一些过滤器，但有两个过滤器我不明白如何应用。

过滤器 1：

• 按选定项过滤项目的公司复选框列表 公司。

过滤器 2：

• 一种颜色过滤器，当单击颜色时会过滤设备 有那种颜色的

对于公司过滤器，我有这个复选框列表：

<div ng-repeat="company in deviceCompanies">
    <input type="checkbox" data-ng-model="companyFilters" id="{{company.CompanyID}}" data-ng-true-value='{{company.CompanyID}}' data-ng-false-value='' />
    <label for="{{company.CompanyID}}">{{company.CompanyName}}</label>
</div>

在控制器端我有这个：

$scope.companyFilters = [];

对于滤色器，我有这个：

<div>
    <a ng-click="???">All</a>
    <div ng-repeat="color in deviceColors" style="display:inline-block; margin-right:10px;">
        <div style="width:20px;height:20px;background-color:{{color.ColorCode}}"></div>
        <a ng-model="selColor" data-ng="color.ColorCode" ng-click="colorFilters">{{color.ColorName}}</a>
    </div>
</div>

在控制器上：

$scope.colorFilters = function (device) {
        if (!$scope.selColor)
            return true;
        for (var i = 0; i < device.Colors.length; i++) {
            if (device.Colors[i].ColorCode == $scope.selColor)
                return true;
        }
        return false;
    };

但它不起作用...... 谁能告诉我如何应用这些过滤器？

Answer 1

由于您使用 ng-repeat 来创建自己的范围，因此您在 ng-repeat 中所做的任何事情都不会在控制器范围内得到识别。使用 ng-inspector 或 batarang 之类的工具可以说明这一点。

我建议在你的控制器中添加 controllerAs 语法。

angular.module('myModule').controller('CustomFilterController', function() {
  var vm = this;
  this.devices = //your list of data
  this.companyFilters = [];
  this.colorFilters = //your function
}

在你的视图中声明你的控制器是这样的：

 <div ng-controller='CustomFilterController as custom'>

（注意 as 后面的值可以是你想要的任何值）

然后将该控制器上的任何内容引用为 custom.ThingOnController

前：

<div ng-repeat="device in custom.devices | filter:custom.companyFilters | filter:custom.colorFilters">

Answer 2

在尝试了一些解决方法后，我想到了这个：

<div ng-repeat="company in deviceCompanies">
    <!--the ng-click will call a function that updated an array of values-->
    <input type="checkbox" id="{{company.CompanyID}}" ng-click="selectCompany(company.CompanyID)">
    <label for="{{company.CompanyID}}">{{company.CompanyName}}</label>
</div>

而控制器部分就是这么简单：

$scope.selectedCompanies = [];
//when the array is upted the filter function will also launch
$scope.selectCompany = function (companyId) {
    var i = $.inArray(companyId, $scope.selectedCompanies);
    if (i > -1) {
        $scope.selectedCompanies.splice(i, 1);
    } else {
        $scope.selectedCompanies.push(companyId);
    }
}

$scope.companyFilter = function (device) {
    if ($scope.selectedCompanies.length > 0) {
        if ($.inArray(device.Company.CompanyID, $scope.selectedCompanies) < 0)
            return;
    }

    return device;
}

颜色过滤器也是如此：

<div>
    <a ng-click="selectColor()">All</a>
    <div ng-repeat="color in deviceColors" style="display:inline-block; margin-right:10px;">
        <div style="width:20px;height:20px;background-color:{{color.ColorCode}}"></div>
        <a ng-click="selectColor(color.ColorCode)">{{color.ColorName}}</a>
    </div>
</div>

和控制器部分：

$scope.selectedColor;

$scope.selectColor = function (colorCode) {
    $scope.selectedColor = colorCode;
}

$scope.colorFilters = function (device) {
    if (!$scope.selectedColor)
        return true;
    for (var i = 0; i < device.Colors.length; i++) {
        if (device.Colors[i].ColorCode == $scope.selectedColor)
            return true;
    }
    return false;
};

最后，应用过滤器：

<div ng-repeat="device in devices | filter:companyFilter | filter:colorFilters">
    ...
</div>

你可以看看here看看它是如何工作的

我认为滤色器可以更优雅，但是，现在，这可以解决问题。

如果我想出更好的解决方案，我会在这里发布。