Javascript 在Angular JS中显示基于对象属性的html元素

这是我用来显示简单下拉列表的代码

var products = [
    {
        "id": 1,
        "name": "Product 1",
        "price": 2200,
        "category": "c1"

    },
    {
        "id": 1,
        "name": "Product 2",
        "price": 2200,
        "category": "c2"
    },
    {
        "id": 1,
        "name": "Product 3",
        "price": 2200,
        "category": "c1"
    },
    {
        "id": 1,
        "name": "Product 4",
        "price": 2200,
        "category": "c3"
    },
    {
        "id": 1,
        "name": "Product 5",
        "price": 2200,
        "category": "c3"
    }
];

<div ng-repeat="product in products" class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li ng-repeat="product in products"><a href="#">{{product.name}}</a></li>
  </ul>
</div>

var产品=[
{
“id”：1，
“名称”：“产品1”，
“价格”：2200美元，
“类别”：“c1”
},
{
“id”：1，
“名称”：“产品2”，
“价格”：2200美元，
“类别”：“c2”
},
{
“id”：1，
“名称”：“产品3”，
“价格”：2200美元，
“类别”：“c1”
},
{
“id”：1，
“名称”：“产品4”，
“价格”：2200美元，
“类别”：“c3”
},
{
“id”：1，
“名称”：“产品5”，
“价格”：2200美元，
“类别”：“c3”
}
];
挑选

我想显示基于类别的下拉列表，如果对象中有3个类别，我想显示3个下拉列表，其产品显示在下拉列表中，如果是2个类别，则显示2个下拉列表，依此类推

谁能帮我实现这个目标？我是个新手

---

谢谢你

对另一个问题的评论中的提示非常有用

您可以使用控制器中的

$scope.categories=$filter（$scope.products，'category'）

或标记中的（products | groupBy:'category'）”中的

ng repeat=“（group，cat）”来完成此操作

请看一下下面的演示或本演示


angular.module（'demoApp'，['ui.bootstrap'，'angular.filter']））
.controller（'mainController'，函数（$scope，$filter）{
$scope.products=[{
“id”：1，
“名称”：“产品1”，
“价格”：2200美元，
“类别”：“c1”
}, {
“id”：2，
“名称”：“产品2”，
“价格”：2200美元，
“类别”：“c2”
}, {
“id”：3，
“名称”：“产品3”，
“价格”：2200美元，
“类别”：“c1”
}, {
“id”：4，
“名称”：“产品4”，
“价格”：2200美元，
“类别”：“c3”
}, {
“id”：5，
“名称”：“产品5”，
“价格”：2200美元，
“类别”：“c3”
}];
$scope.categories=$filter（'groupBy'）（$scope.products，'categority'）；
log（$scope.categories）；
});

精选产品



选择类别

类别：{{group}


看看这个答案：