如何按变量过滤 AngularJS 中的列表

Question

我有什么应该是很简单的任务。我想根据给定参数对 angular 中的下拉菜单进行排序。应该很容易。

我调用数据服务 returns 一些数据如下：

"success" : true,
    "data" : {
        "this_status" : [{
                "DefNo" : "111*A",
                "Com" : "111",
}, {
                "DefNo" : "222*B",
                "Com" : "222",
}, {
                "DefNo" : "333*C",
                "Com" : "333",
}
];
        "this_info" : [{
                 "Req" : "MUST",
                 "DefCom" : "111",
}, {
                 "Req" : "NoMUST",
                 "DefCom" : "222"
}, {
                 "Req" : "MUST",
                 "DefCom" : "333"
}]}

我的任务是制作一个包含所有 DefCom 值的列表，这些值也具有关联的 MUST 值。我需要在下拉列表中列出 "DefCom" 个具有 "Req" 即 "MUST" 的数字。所以在我的示例中，我的下拉列表将具有值 111 和 333。

在我的控制器中，我执行调用

   $scope.getDefCom = function(){
        MyAPIservice.getDefCom().success(function(response){
            $scope.info = response.data.this_info;
            $scope.infoList = $scope.info;
        });
        }

我所在的工厂：

angular.module('MyAPI.services', [])
  .factory('MyAPIservice', function($http) {
    var MyAPI = {};
    MyAPI.getDefCom = function () {
        return $http({
            method: 'GET',
            url: '/thisis/mylink/'
        });
    };

    return invoiceheaderAPI;
});

这适用于我的第一个倡议，制作一个下拉列表，列出 DefCom 号码。但是，接下来我需要过滤它们。

$scope.require = MUST 在这个例子中。

在我的模板中：

<option ng-repeat="option in DefComList" value="{{option.DefCom}}">{{option.DefCom}} </option>

我试过像这样做一个过滤器：

ng-repeat="option in DefComList | filter: {Req: $scope.require}"

然而，经过更多的阅读，我找不到任何可以将 $scope 变量插入过滤器的地方。大多数建议都倾向于编写您自己的过滤器。我这样做了，使用 angular.forEach。我的过滤器如下：

 $scope.filterDefs = function($scope) {
        var clrreturn = false;
        angular.forEach($scope.info, function(value, key) {
            if (value.DefCom == $scope.require)
                clrreturn = true;

        });
        return clrreturn;
    };

但是，在从 $scope.getDefCom 函数获取 $scope.info 的结果之前，我的自定义过滤器是运行。这是在 $scope.info 准备好之前抛出一个 Error: undefined is not an object (evaluating '$scope.info')。我知道这与 promises 有关，所以我尝试写 deferred promises。然而，这也没有用，我感到很沮丧，因为这似乎应该是一项非常简单的任务，而我可能会让自己变得比它应该做的更难。

Answer 1

我觉得你可能想多了；如果我明白你想做什么，那么你在过滤器中只需要：

ng-repeat="option in DefComList | filter: require : true"

请注意完全匹配的 true，因为您搜索 'MUST' 也会匹配 'noMUST'。

这是我为您整理的快速 fiddle：https://jsfiddle.net/nqya24r4/

此外，如果您特别只想搜索 Req 属性，则可以使用对象而不是字符串进行过滤。这是另一个 fiddle 证明这一点：https://jsfiddle.net/t3bw5L5d/2/

希望对您有所帮助。

如何按变量过滤 AngularJS 中的列表

How to filter list in AngularJS by variable

javascript

angularjs

angularjs-scope

angularjs-filter

angular-promise