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'>

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

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

EX：

<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以查看其工作原理

我认为滤色镜可以更优雅，但是，就目前而言，这可以解决问题。

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

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

2 个答案: