按字段对对象进行分组,然后按条件字段进行分组

时间:2018-03-13 13:13:48

标签: angularjs

我有一个对象列表,我使用ng-repeat来显示。

我需要能够通过字段对这些对象进行分组,例如departmentID。

然后我需要能够遍历每个部门,然后是第二个字段,这将是初步或最终的。如果某个部门有最终记录,则应隐藏初步记录。如果某个部门没有最终版本,请显示初步。

实施例。

  • 部门1
    • 初步 - 不可见
  • 部门1
    • 最终 - 可见
  • 部门2
    • 最终 - 可见
  • 部门3
    • 初步 - 不可见
  • 部门3
    • 最终 - 可见
  • 部门4
    • 初步 - 可见

数据样本



var data = [
  { departmentID: 1, status: 'preliminary'  },
  { departmentID: 1, status: 'final'  },
  { departmentID: 2, status: 'final'  },
  { departmentID: 3, status: 'preliminary'  },
  { departmentID: 3, status: 'final'  },
  { departmentID: 4, status: 'preliminary'  },
];




以下当前代码



if (item.result_status !== "preliminary") {
	return item;
}
else if (item.result_status === "final") {
	return item;
}
else {
	return false;
}

<div ng-repeat="(key, value) in Data | groupBy: 'department_ID'">
	<div ng-repeat="v in value | filter:prelimFilter(value)">
		<a ng-click="showPopUp(key)">{{Some Other Field}} </a>
	</div>
</div>



<!-- begin snippet: js hide: false console: true babel: false -->
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

你很亲密!您使用departmentID过滤器根据groupBy对对象进行分组时,您的前半部分代码是正确的。问题出在您的custom filter上。您创建的是filter function而不是custom filter,问题是filter function无法访问整个数组。它只能访问单个元素。这个blog清楚地解释了可以在angularjs中创建的filter的不同类型。

您可以创建一个可以访问该阵列的自定义过滤器,并且可以根据状态

返回已过滤的阵列
.filter('myFilter', function () {  
    return function(inputArr) {
        var outputArr = [];

        outputArr = inputArr.filter(function(obj){return obj.status === "final"});

        outputArr = outputArr.filter(function(e){return e}); //To remove empty elements

        if(outputArr.length === 0){
            outputArr = inputArr; //inputArr does not have obj with status 'final'
        }

       return outputArr;
    };
});

工作jsfiddle here。祝你好运!

注意:groupBy过滤器不是angular.js的一部分您必须包含angular.filter模块。