如何将数字关联到特定字符串并使用该字符串过滤 AngularJS 中的迭代？

Question

我是 AngularJS 的新手，在执行可重复使用的通用过滤器时遇到问题。

假设我有一个 colors、types 和 list 对象，如下所示（新 JSON）。我想制作一个通用过滤器，它将采用 colors 和 types 对象并过滤 list 对象而不必须使用字符串匹配作为过滤器。

现在我按字符串做了特定的过滤器，如下所示。

我将在这些对象中包含很多信息，我不想每次在 JSON 中包含新的属性时都更新控制器。

如何将数字与其特定字符串值相关联？

旧JSON

[
    {
        "id": 1,
        "name": "Spike",
        "type": "dog",
        "color": "gray"
    },
    {
        "id": 2,
        "name": "Tom",
        "type": "cat",
        "color": "blue"
    },
    {
        "id": 3,
        "name": "Butch",
        "type": "cat",
        "color": "black"
    }
]

新建JSONs

// colors
[
    {"gray": 1},
    {"black": 2},
    {"blue": 3},
]

// types

[
    {"dog": 1},
    {"cat": 2}
]

// data list
[
    {
      "id": 1,
      "type": 1,
      "name": "Spike",
      "color": 1
    },
    {
      "id": 2,
      "type": 2,
      "name": "Tom",
      "color": 3
    },
    {
      "id": 3,
      "type": 2,
      "name": "Butch",
      "color": 2
    }
]

过滤器

        <table class="table table-bordered table-condensed table-striped table-hover">
            <thead>
                <tr>
                    <th>
                        <a>
                            Filters:
                        </a>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in typeItems">
                    <td>
                        <label class="check">
                            <input type="checkbox" ng-model="typeFilterItems[item.type]">{{item.type}}
                        </label>
                    </td>
                </tr>
                <tr ng-repeat="item in colorItems">
                    <td>
                        <label class="check">
                            <input type="checkbox" ng-model="colorFilterItems[item.color]">{{item.color}
                        </label>
                    </td>
                </tr>
            </tbody>
        </table>

列表

        <table class="table table-bordered table-condensed table-striped table-hover header-fixed">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Type</th>
                    <th>Color</th>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody>
                <tr class="list" ng-repeat="item in animals | filter:typeFilter | filter:colorFilter">
                    <td>{{item.id}</td>
                    <td>{{item.type}}</td>
                    <td>{{item.color}}</td>
                    <td>{{item.name}}</td>
                </tr>
            </tbody>
        </table>

控制器

    Animals.list().then(function (data) {
        $scope.animals = data;
    });

    $scope.colorFilterItems = { 'black': true, 'gray': false, 'blue': false }; // doing this to have a predefined filter selection ... for now
    $scope.colorItems = [{ name: 'black' }, { name: 'gray' }, { name: 'blue' }];

    $scope.colorFilter = function (item) {
        return $scope.colorFilterItems[item.color]
    };

    $scope.typeFilterItems = { 'dog': true, 'cat': false }; // doing this to have a predefined filter selection ... for now
    $scope.typeItems = [{ name: 'black' }, { name: 'gray' }, { name: 'blue' }];

    $scope.typeFilter = function (item) {
        return $scope.typeFilterItems[item.type]
    };

Answer 1

由于没有人回答我最终找到了解决方案。

所有这一切的答案是直接在服务内部使用 lodash，并在 promise 中创建一个过滤方法，在过滤对象中查找选定的属性并将它们与我们要显示的数据进行比较.

filterAnimals = () => {
    intersectedResults =
    _.filter(animals,(animal: iAnimal) => {
        var colors = _.find(colorLabels,(item: iFilter) => {
            return (animal.color ? item.label === animal.color : item.label == null) && item.selected;
        });
        var types = _.find(typeLabels,(item: iFilter) => {
            return (animal.type ? item.label === animal.type : item.label == null) && item.selected;
        });
        return colors && types;
    });
    return data;
};

完成此操作后，我从控制器访问 filterAnimals() 函数并将复选框过滤器绑定到我的数据。在复选框上执行 ng-change 时，此函数会执行并根据数据检查过滤器，并显示我需要的数据。

如何将数字关联到特定字符串并使用该字符串过滤 AngularJS 中的迭代？

How can I associate a number to a specific string and use that string to filter an iteration in AngularJS?

javascript

mapping

json

angularjs

angular-filters

旧JSON

新建JSONs

过滤器

列表