Question

我是Angular JS的新手并且知道基本功能。我正在努力使用ng-repeat和filter选项来通过非唯一键获得所需的输出。

我想用颜色显示汽车或制作类别。我希望看到的结果如此（在这种情况下选择了颜色）：

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-if中的ng-repeat条件逻辑，然后只放{{key}}

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

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

按键

1 个答案: