AngularJs复选框使用数组内部数组进行筛选

时间:2015-10-20 13:18:10

标签: javascript angularjs

我正在使用复选框构建分拣系统来过滤某些业务。我找到了awesome answer here

问题是,它只使用一个元素。在我的情况下,我想按业务类别进行过滤,其中一些最多可以有3个类别。所以我有点卡在那里,因为我不知道如何获得独特的数组,然后应用过滤器。

就我而言,我需要的是:

  • 从数据库中获取业务列表;
  • 创建一个数组,其中包含从每个业务中获取的所有唯一类别;
  • 创建一个包含这些唯一类别的复选框列表;
  • 选中一个复选框后,显示所选类别中的所有商家。

以下是工作版本的简单提示:http://jsfiddle.net/zo47y6es/1/
每个类别只有1个选项;

这是我想要工作的清单的小提琴:http://jsfiddle.net/zo47y6es/2/
这是每个企业的类别列表。

这是我根据该主题的答案制作的代码(简单版本):

app.js

//Loop and create unique items for checkbox
var uniqueItems = function (data, key) {
    var result = [];
    for (var i = 0; i < data.length; i++) {
        var value = data[i][key];
        if (result.indexOf(value) == -1) {
            result.push(value);
        }
    }
    return result;
};

//Default array. Comes from the page where we select the checkbox
$scope.useCategory = {};

$scope.$watch(function () {
    return {
        business: $scope.business,
        useCategory: $scope.useCategory
    }
}, function (value) {
    var selected;

    //Update filter couting
    $scope.count = function (prop, value) {
        return function (el) {
            return el[prop] == value;
        };
    };

    //Unique items to create filter in the page
    $scope.categoryGroup = uniqueItems2($scope.business);

    //Execute the filter process in the category
    var filterAfterCheck = [];
    selected = false;
    for (var j in $scope.business) {
        var p = $scope.business[j];
        for (var i in $scope.useCategory) {
            if ($scope.useCategory[i]) {
                selected = true;
                if (i == p.categoria) {
                    filterAfterCheck.push(p);
                    break;
                }
            }
        }
    }
    if (!selected) {
        filterAfterCheck = $scope.business;
    }

    $scope.filteredBusiness = filterAfterCheck;
}, true);

我开始尝试使用它,但我已经在uniqueItems过程中遇到了一些错误,而且无法继续。

var uniqueItems2 = function (data) {
    var result = [];
    for (var i = 0; i < data.length; i++) {
        var value = data[i].category;
        if (result.indexOf(value) == -1) {
            result.push(value);
        }
    }
    return result;
};

我的阵列看起来像这样:

$scope.business = [
    {
        "id":1,
        "name":"aaa 001",
        "category":[
            "Food",
            "Market"
        ],
        "rating":"99%",
        "open":"O"
    },
    {
        "id":2,
        "name":"aaa 002",
        "category":[
            "Clothes",
            "Shoes",
            "Dress"
        ],
        "rating":"99%",
        "open":"O"
    },
    {
        "id":1,
        "name":"aaa 001",
        "category":[
            "Market",
            "Other"
        ],
        "rating":"99%",
        "open":"O"
    }
]

有谁知道我应该如何实现这一结果? 我需要根据他们可能有多个类别的事件来过滤业务(在我的情况下,每个业务最多5个)。

0 个答案:

没有答案