AngularJS NG-repeat：如何重复必须过滤唯一值的ng-repeat内的数据

Question

我正在开发一个具有返回信息结果的JSON数据的项目。基本上，我们的想法是使用BootStrap选项卡显示这些数据，其中按类别进行过滤。

模拟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",
            ...
        }
    },
]

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

我想要这样的东西：

标记看起来像这样：

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

该指令调用服务，所有数据都在范围内。现在元素有这个：

<ul class="nav nav-tabs col-lg-4 col-md-4" role="tablist">
    <li ng-repeat="data in tableData | unique: 'category'"><a href="#{{$index}}" role="tab" toggle="tab"></li>
</ul>


...

<div class="tab-content col-lg-8 col-md-8">
    <div role="tabpanel" class="tab-pane fade" id="{{$index}}" ng-repeat="contents in tableData | unique: 'category'">
         <h1>{{ contents.category }}</h1>
         <div class="tab-content-details">
             <table class="table">
                 <tr>
                     <td>{{ contents.price }}</td>
                     <td>{{ contents.productConfig.specs }}</td>
                     <td>{{ contents.productConfig.description }}</td>
                 </tr>
             </table>
         </div>
    </div>
</div>

但是当前代码给我的结果如下：

每个类别相当于一个nav-link和一个tab-pane。意思是，如果一个类别有多个产品 - 那么<table>应该在ng-repeat而不是tab-pane本身。

以下是实现目标的理想标记结果：

<ul class="nav nav-tabs col-lg-4 col-md-4" role="tablist">
    <li class="active"><a href="#0" role="tab" toggle="tab">Category A</li>
    <li><a href="#1" role="tab" toggle="tab">Category B</li>
    ...
</ul>


...

<div class="tab-content col-lg-8 col-md-8">
    <div role="tabpanel" class="tab-pane fade active" id="0">
         <h1>Category A</h1>
         <div class="tab-content-details">
             <table class="table">
                 <tr>
                     <td>499.00</td>
                     <td>Lorem ipsum</td>
                     <td>blah blah</td>
                 </tr>
                 <tr>
                     <td>479.00</td>
                     <td>Lorem ipsum</td>
                     <td>blah blah</td>
                 </tr>
             </table>
         </div>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="1">
         <h1>Category B</h1>
         <div class="tab-content-details">
             <table class="table">
                 <tr>
                     <td>1299.00</td>
                     <td>Lorem ipsum</td>
                     <td>blah blah</td>
                 </tr>
             </table>
         </div>
    </div>
</div>

有没有办法可以用当前的数据结构实现我想要的结果？谢谢大家！

Answer 1

另一答案