Javascript angular.js ng重复除法

我有一系列具有以下结构的类别：

{
name: 'something',
main_category: 'A'
}

所以每个类别都有它的主要类别。我希望以html格式显示所有类别，如下所示：

<h1>A</h1>
<ul>
<li>list of categories that has main category A</li>
</ul>
<h1>B</h1>
<ul>
<li>list of categories that has main category B</li>
</ul>

A

具有主类别A的类别列表

B

具有主类别B的类别列表

我应该如何实现它？我唯一能找到的方法就是这样做：

<h1>A</h1>
<ul>
<li ng-repeat="category in categories" ng-if="category.main_category == 'A'">..</li>
</ul>
<h1>B</h1>
<ul>
<li ng-repeat="category in categories" ng-if="category.main_category == 'B'">..</li>
</ul>

A



B

它可以工作，但我认为这不是一个好主意。

如何使用Angular的

过滤器：{prop:'value'}

语法来实现与

ng if

相同的功能：

<h1>A</h1>
<ul>
    <li ng-repeat="category in categories | filter: {main_category: 'A'}"></li>
</ul>

<h1>B</h1>
<ul>
    <li ng-repeat="category in categories | filter: {main_category: 'B'}"></li>
</ul>

A



B

您应该使用由提供的groupBy筛选器，并执行以下操作

var myApp=angular.module（'mcApp'，['angular.filter']）；
myApp.controller（'mcController'，['$scope'，函数（$scope）{
console.log（'asadsds'）；
$scope.myArray=[
{
名称：“某物1”，
主要类别：“B”
},
{
名字：'某物2'，
主要类别：“A”
},
{
名字：'某物3'，
主要类别：“A”
},
{
名字：'somesome4'，
主要类别：“B”
},
{
名字：5岁左右，
主要类别：“B”
}
];
}]);

示例-示例-示例7-生产
{{name}}

{{object.$key}}


{{value.name}


您可以通过创建第二个主类别数组来完成。使用ng repeat start和ng repeat end创建基本结构（h1+ul）。在ul中，由主类别过滤的类别的第二个中继器呈现列表项（）：


{{mainCategory}}

{{{category.name}

函数MyCtrl（$scope）{
变量类别=[{
名称：“somethingA2”，
主要类别：“A”
}, {
名称：“somethingB1”，
主要类别：“B”
}, {
名称：“somethingB2”，
主要类别：“B”
}, {
名称：“somethingA3”，
主要类别：“A”
}, {
名称：“somethingB3”，
主要类别：“B”
}, {
名称：“somethingA1”，
主要类别：“A”
}];
$scope.categories=类别；
/**main categories—将categories数组简化为dictionary对象，并获取字典的键以获取唯一的主类别名称**/
$scope.maincegories=Object.keys（categories.reduce）（函数（main，category）{
主[类别['main_category']=''；
回水总管；
}, {}));
}

<div ng-app ng-controller="MyCtrl">
     <h1 ng-repeat-start="mainCategory in mainCategories | orderBy">{{mainCategory}}</h1> 
    <!-- main categories ngRepeat starts here -->
    <ul ng-repeat-end>
        <!-- main categories ngRepeat ends here -->
        <li ng-repeat="category in categories | orderBy:'name' | filter:{ 'main_category': mainCategory}">{{category.name}}</li>
        <!-- categories are filtered by mainCategory -->
    </ul>
</div>


function MyCtrl($scope) {
    var categories = [{
        name: 'somethingA2',
        main_category: 'A'
    }, {
        name: 'somethingB1',
        main_category: 'B'
    }, {
        name: 'somethingB2',
        main_category: 'B'
    }, {
        name: 'somethingA3',
        main_category: 'A'
    }, {
        name: 'somethingB3',
        main_category: 'B'
    }, {
        name: 'somethingA1',
        main_category: 'A'
    }];

    $scope.categories = categories;

    /** main categories - reduce the categories array to a dictionary object, and get the keys of the dictionary to get the unique main category names **/
    $scope.mainCategories = Object.keys(categories.reduce(function (main, category) {
        main[category['main_category']] = '';
        return main;
    }, {}));
}