Question

我正在尝试对ng-options中使用的对象进行花哨的过滤。

我的ng-options致电：

<select class="form-control" ng-model="type" ng-options="k as v.display for (k, v) in ssidTypes"></select>

以下是传入的对象。

$scope.ssidTypes = {
    "CPE": {
        display: "Fixed/CPE",
        features: {
            CI: false,
            SSIDVLAN: true,
            CPEVLAN: true
        },
        intfs: [5],
        modes: ["tdma", "csma"],
    },
    "Hotspot": {
        display: "Hotspot",
        features: {
            CI: true,
            SSIDVLAN: true,
            CPEVLAN: false
        },
        intfs: [2, 5],
        modes: ['csma']
    },
    "Trunk": {
        display: "Trunk",
        features: {
            CI: false,
            SSIDVLAN: false,
            CPEVLAN: false
        },
        intfs: [5],
        modes: ['tdma', 'csma']
    }
};

我正在尝试根据对象的intfs和modes属性筛选出选项。

我的意思是：

$scope.intf = 5;

我希望选项只能是intf数组中有5个的选项。

我希望有一些方法可以做| filter:{something something here}，这对我来说可以神奇地做到这一点。

Answer 1

一个简单的自定义过滤器应该这样做，就像你为一个普通的ng-repeat返回一个数组一样，在你的情况下你应该构建一个对象并为它提供传递的属性

.filter('customFilter', function() {
    return function(data, intf) {
        var result = {}; // new empty object
        for (var key in data) {
            if (data[key].intfs.indexOf(intf) > -1) { // if number exists in array
                result[key] = data[key]; // add property to object
            }
        }
        return result;
    }
});

（您可能希望为此代码添加类型检查和验证）

HTML

<select class="form-control" ng-model="type" ng-options="k as v.display for (k, v) in ssidTypes | customFilter: currentIntf"></select>

Plunker

Answer 2

您可以创建自定义过滤器来实现此目的。您可以创建一个过滤器中的函数，它将处理您想要文件管理器的密钥。以下过滤条件适用于您对象的intfs和modes键。

自定义过滤器：

app.filter('selectedTags', function() {
    return function(ssidTypes, filerval) {
        var tempArr = [];
        angular.forEach(ssidTypes, function(key, val) {
            tempArr.push(key);
        });
        return tempArr.filter(function(value) {
            //function to create filter for dynamic keys 
            function filterValue(parameter) {
                    for (var i in value[parameter]) {
                        if (filerval.indexOf(value[parameter][i]) != -1) {
                            return true;
                        }
                    }
                }
                //pass any key you want in your object   
                //If you want your object to be filtered based on either of the key
            if (filterValue('intfs') || filterValue('modes')) {
                return true;
            } else
                return false;
            //If you want your object to be filtered based on both of the key
            /*          if(filterValue('intfs') && filterValue('modes')) {
                          return true;
                        }
                        else
                          return false;  */
        });
    };
})

传递控制器的值。您可以传递要过滤的任意组合键。

<强>控制器：

  $scope.filerval=[2,"csma"];
  //$scope.filerval=[2,"tdma"];
  //$scope.filerval=[5,"tdma"];

<强> HTML

 <select class="form-control" ng-model="type" ng-options="k as v.display for (k, v) in ssidTypes | selectedTags:filerval"></select>

工作演示：https://plnkr.co/edit/YFfFHAriMQqfN25Q5Pon?p=preview

在对象子属性数组上使用过滤器？

2 个答案: