Angular js ng-repeat按键堆叠

Question

我是 Angular JS 的新手，了解基本功能。我正在努力使用 ng-repeat 和过滤器选项来通过非唯一键获得所需的输出。

我想在 html 中按颜色或分类显示汽车。所以我希望看到的结果是（在这种情况下选择了颜色）：

Sort by: CarID, Make or **Color**
Blue
  Focus
Red
  Camry
  Mustang
Yellow
  LandCruiser

来自控制器的数组是：

 cars: [
{
    "carid": 1,
    "makeid": 1,
    "carname": 'camry',
    "color": 'red'
},
{
    "carid": 2,
    "makeid": 2,
    "carname": 'mustang',
    "color": 'red'
},
{
    "carid": 3,
    "makeid": 1,
    "carname": 'landcruiser',
    "color": 'yellow'
},
{
    "carid": 4,
    "makeid": 1,
    "carname": 'focus',
    "color": 'blue'
},
{
    "carid": 5,
    "makeid": 3,
    "carname": 'civic',
    "color": 'blue'


   }
] 

make: [
    {
        "makeid": 1,
        "makeName": 'Toyota'
    },
    {
        "makeid": 2,
        "makeName": 'Ford'
    },
    {
        "makeid": 3,
        "makeName": 'Civic'
    }
]

我尝试使用以下 html 但没有工作

<div class="car" ng-repeat="car in cars track by color">
   <label>{{car.color}}</label>
   <div class="subcar" ng-repeat="c in cars filer by car.color">
      <label>{{c.carname}}</label>
   </div>
</div>

同样使用上述查询，一旦用户点击 Make 链接，如何将过滤器中的颜色替换为 Make？

Answer 1

您可以利用角度过滤器模块和 groupBy 集合来实现您所追求的：

<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <a href="" ng-click="ourGrouper ='color'">Color</a>
    <a href="" ng-click="ourGrouper ='makeid'">Make</a>

    <ul ng-repeat="(key, value) in cars | groupBy:ourGrouper">
      <li>
        <span ng-if="ourGrouper=='makeid'">{{(make | filter:{makeid:key})[0].makeName}}</span>
        <span ng-if="ourGrouper=='color'">{{key}}</span>
        <ul>
          <li ng-repeat="car in value">
            {{car.carname}}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

这基于您提供的对象数组工作，但确实不理想...... JSON 并不是真正设计为通过 id 引用其他对象，您上面的设置更多是您用来规范化的结构SQL 数据库。如果您对这些 JSON 对象有任何控制权，请将两者结合起来，以便 makeName 替换 makeid。

类似：

$scope.cars = [{
    "carid": 1,
    "makeName": 'Toyota',
    "carname": 'camry',
    "color": 'red'
}];

然后您可以删除ng-repeat 中的ng-if 条件逻辑，然后放入{{key}}

工作示例： https://jsfiddle.net/r0m4n/pn0g3rrg/

模块的文档参考： https://github.com/a8m/angular-filter#groupby