Javascript AngularJS NG repeat：如何在必须过滤唯一值的NG repeat中重复数据

我正在做一个项目，它有一个JSON数据，可以返回信息的结果。基本上，我们的想法是通过使用引导选项卡来显示这些数据，在引导选项卡中按类别进行过滤

模拟JSON数据：

"result": [
    {
        category: "A",
        price: "499.00",
        productName: "AAA",
        productConfig: {
            specs: "Lorem ipsum",
            creditAllowed: false,
            description: "blah blah",
            ...
        }
    },
    {
        category: "A",
        price: "479.00",
        productName: "AAB",
        productConfig: {
            specs: "Lorem ipsum",
            creditAllowed: true,
            description: "blah blah",
            ...
        }
    },
    {
        category: "B",
        price: "1299.00",
        productName: "BBB",
        productConfig: {
            specs: "Lorem ipsum",
            creditAllowed: true,
            description: "blah blah",
            ...
        }
    },
    {
        category: "A",
        price: "359.00",
        productName: "AXX",
        productConfig: {
            specs: "Lorem ipsum",
            creditAllowed: true,
            description: "blah blah",
            ...
        }
    },
]

<a load-data data-param="1">Load me</a>

鉴于这些数据。当然，我需要使用ng repeat在引导选项卡中显示所有这些数据

我想要这样的东西：

"result": [
    {
        category: "A",
        price: "499.00",
        productName: "AAA",
        productConfig: {
            specs: "Lorem ipsum",
            creditAllowed: false,
            description: "blah blah",
            ...
        }
    },
    {
        category: "A",
        price: "479.00",
        productName: "AAB",
        productConfig: {
            specs: "Lorem ipsum",
            creditAllowed: true,
            description: "blah blah",
            ...
        }
    },
    {
        category: "B",
        price: "1299.00",
        productName: "BBB",
        productConfig: {
            specs: "Lorem ipsum",
            creditAllowed: true,
            description: "blah blah",
            ...
        }
    },
    {
        category: "A",
        price: "359.00",
        productName: "AXX",
        productConfig: {
            specs: "Lorem ipsum",
            creditAllowed: true,
            description: "blah blah",
            ...
        }
    },
]

<a load-data data-param="1">Load me</a>

标记如下所示：

"result": [
    {
        category: "A",
        price: "499.00",
        productName: "AAA",
        productConfig: {
            specs: "Lorem ipsum",
            creditAllowed: false,
            description: "blah blah",
            ...
        }
    },
    {
        category: "A",
        price: "479.00",
        productName: "AAB",
        productConfig: {
            specs: "Lorem ipsum",
            creditAllowed: true,
            description: "blah blah",
            ...
        }
    },
    {
        category: "B",
        price: "1299.00",
        productName: "BBB",
        productConfig: {
            specs: "Lorem ipsum",
            creditAllowed: true,
            description: "blah blah",
            ...
        }
    },
    {
        category: "A",
        price: "359.00",
        productName: "AXX",
        productConfig: {
            specs: "Lorem ipsum",
            creditAllowed: true,
            description: "blah blah",
            ...
        }
    },
]

<a load-data data-param="1">Load me</a>

有没有一种方法可以利用当前的数据结构实现我想要的结果？谢谢大家

var-app=angular.module（“app”，[]）；
app.controller（'AppCtrl'，函数（$scope）{
$scope.json_data={
“结果”：[
{
类别：“A”，
价格：“499.00”，
产品名称：“AAA”，
产品配置：{
规格：“Lorem ipsum”，
错误：错误，
描述：“胡说八道”，
}
},
{
类别：“A”，
价格：“479.00”，
产品名称：“AAB”，
产品配置：{
规格：“Lorem ipsum”，
对,，
描述：“胡说八道”，
}
},
{
类别：“B”，
价格：“1299.00”，
产品名称：“BBB”，
产品配置：{
规格：“Lorem ipsum”，
对,，
描述：“胡说八道”，
}
},
{
类别：“A”，
价格：“359.00”，
产品名称：“AXX”，
产品配置：{
规格：“Lorem ipsum”，
对,，
描述：“胡说八道”，
}
},
]
}               
$scope.tableData_obj={}
$scope.filterTxn={}
$scope.json_data['result'].forEach（函数（val）{
if（val['category']在$scope.tableData_obj中）
返回；
其他的
$scope.tableData_obj[val['category']]=true；
})
$scope.tableData=Object.keys（$scope.tableData\u obj）
$scope.own_filter=函数（值）{
if（！$scope.filterTxn['values']））
返回true；
if（值['category']=$scope.filterTxn['values']）
返回真值
其他的
返回false；
}
$scope.update\u filterTxn\u values=函数（数据）{
$scope.filterTxn['values']=数据；
}
})

li.ACTIVE{
背景：绿色；
}
李{
列表样式类型：无；
}
李阿{
光标：指针；
}
主动的，主动的{
颜色：白色；
字号：700；
}

{{{'单击此处筛选数据-'+data}

{{'Selected Category-'+filterTxn['values']}
{{contents.category}
{{contents.price}}
{{contents.productConfig.specs}
{{contents.productConfig.description}

首先，您应该将选项卡定位为

id

，您可以将每个选项卡设置为具有与

数据相同的
id
。类别

，而不是

$index

<代码>切换应该是

数据切换

，否则它将无法与引导选项卡一起工作：

然后，您可以在上述相同的唯一重复上使用嵌套的

ng repeat

，并使用

ng if

来比较整体

数据

类别与嵌套的

内容

类别：

{{content | json}

现在您可以根据需要设置每个项目的样式，我只需呈现JSON

---

演示->

您必须重新构造JSON对象，就像首先必须找到唯一的类别并将重复的类别推到该类别中一样。通过这种方式，您可以轻松实现所需的功能。为什么不将href更改为类别，按类别对数组元素进行分组，并按类别对选项卡内容进行id？您还可以按类别过滤数组本身，制作一个对象，将过滤后的数组映射到类别，并使用（键、值）将整个内容包装在重复中一对地图。谢谢Sudhakar！这几乎完成了，但主要问题尚未解决。它正在过滤内容，但是每个

选项卡窗格

应该一个接一个地显示，而不是一个地显示所有em。上面的代码显示类别A的所有

选项卡窗格

。但对于每个类别，它应该是一个

选项卡窗格

。。。对于上述类别下的所有数据，只有将有一个单独的

ng repeat

。谢谢@alleycat，不客气。谢谢你的帮助