AngularJS按唯一属性值过滤并获取过滤后的计数

时间:2014-10-06 12:16:48

标签: javascript angularjs

我有以下数组:

items: [
{
    id: "0",
    name: "כיבוי אורות",
    icon: "rooms_salon.svg",
    type: "scenario",
    status: 1
},
{
    id: "1",
    name: "הדלקת אורות",
    icon: "rooms_salon.svg",
    type: "scenario",
    status: 1
},
{
    id: "0",
    name: "תנור מטבח",
    icon: "rooms_salon.svg",
    type: "heater",
    status: 0
},
{
    id: "1",
    name: "מזגן מטבח",
    icon: "rooms_salon.svg",
    type: "ac",
    status: 0
}]

我需要过滤它,所以我只得到唯一的item.type和每种类型的原始项目数量。

我需要的决心:

items: [
    {
        type: "scenario",
        amount: 2
    },
    {
        type: "heater",
        amount: 1
    },
    {
        type: "ac",
        amount: 1
    }
]

最好的方法是什么?

P.O:我需要在控制器中过滤它,而不是在ng-repeat中过滤它。

感谢分配

阿维

2 个答案:

答案 0 :(得分:11)

您可以使用angular-filter module对商品进行分组:

$scope.items = [
{
    id: "0",
    name: "כיבוי אורות",
    icon: "rooms_salon.svg",
    type: "scenario",
    status: 1
},
{
    id: "1",
    name: "הדלקת אורות",
    icon: "rooms_salon.svg",
    type: "scenario",
    status: 1
},
{
    id: "0",
    name: "תנור מטבח",
    icon: "rooms_salon.svg",
    type: "heater",
    status: 0
},
{
    id: "1",
    name: "מזגן מטבח",
    icon: "rooms_salon.svg",
    type: "ac",
    status: 0
}]

$scope.content = $filter('countBy')($scope.items,'type');

这里有一个有效的plunker

答案 1 :(得分:2)

您没有进行过滤,您需要创建一个具有所需值的新数组。

创建了一个像这样的计算过滤值

function Ctrl($scope){
    $scope.items = [
        {
            id: "0",
            name: "כיבוי אורות",
            icon: "rooms_salon.svg",
            type: "scenario",
            status: 1
        },
        {
            id: "1",
            name: "הדלקת אורות",
            icon: "rooms_salon.svg",
            type: "scenario",
            status: 1
        },
        {
            id: "0",
            name: "תנור מטבח",
            icon: "rooms_salon.svg",
            type: "heater",
            status: 0
        },
        {
            id: "1",
            name: "מזגן מטבח",
            icon: "rooms_salon.svg",
            type: "ac",
            status: 0
        }];

    Object.defineProperty($scope, 'filtered', {
        get: function(){
            var list = {};
            $scope.items.forEach(function (item) {
                if (list[item.type] === undefined) {
                     list[item.type] = 1;
                } else {
                   list[item.type] += 1;
                }
            });          
            var newItems = [];    
            Object.keys(list).forEach(function(key){      
              newItems.push({  
                 type :key,
                 amount: list[key]
              });    
            });
            return newItems;
        }
    });
}

<强> FIDDLE