如何将数字与特定字符串关联，并使用该字符串在AngularJS中过滤迭代

Question

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

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

现在，我按字符串进行了特定的筛选，如下所示。

我在这些对象中会有很多信息，我不想每次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"
    }
]

新的JSON

// 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更改时，此函数会执行并根据数据检查过滤器，它会显示我需要的数据。