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 替换滤镜中的颜色 link？

Answer 1

您可以利用 angular 过滤器模块和 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

Angular js ng-repeat按键堆叠

Angular js ng-repeat stacking by key

sorting

filter

angularjs

ng-repeat