Angular列表只在第一次显示类别

Question

假设我有下一个json文件:

   [{'car' : 'bmw', 'type' : '318'}, 
    {'car':'bmw', type : '745'}, 
    {'car' : 'porsche', 'type' : '911'}]

我想用angular创建一个列表使用

<ul><li ng-repeat="item in cars"><h4>Car:{{item.car}}</h4><h4>Type:{{item.type}}</li><ul>

我得到一个列表显示:

Car: BMW 
Type : 318 
Car: BMW 
Type : 745 
Car: Porsche 
Type: 911

我可以使用一些有角度的表达式来不显示宝马第二次，例如一些如果当前的车=前一辆车不显示。所以我会得到一个列表显示

Car: BMW
Type: 318
Type: 745
Car: Porsche
Type: 911

我真的卡住了，希望能得到帮助!

Answer 1

可以使用groupBy/angular-filter模块

在你的html中包含angular-filter.js，然后执行以下操作

更新你的模块

angular.module("myApp", ['angular.filter'])

更新你的标记

<ul>
   <li ng-repeat="(key,value) in cars | groupBy : 'car'">
     Car:{{key}}
     <h4 ng-repeat="item in value">
      Type:{{item.type}}
      </h4>
   </li>
<ul>

参考- https://github.com/a8m/angular-filter

工作版本- http://plnkr.co/edit/ZqRa0rZ1lh7QdcQihvXH?p=preview

Answer 2

在javascript级别重新组织数据可能更容易。如果您有一个以car为关键字的字典，其中包含所有type s的列表，那么将它们分离到单独的列表将更容易。基本上，我建议按汽车对数据进行分组，并将其附加到该汽车的类型列表中。

如果你可以把你的对象列表变成这样:

var data = {
    bmw: {
        name: "bmw",
        types: ["318", "745"]
    },
    porche: {
        name: "porche",
        types: ["911"]
    }
};

那么你的HTML就变得简单了:

<div ng-repeat="brand in data">   <!-- This is ng-repeat over the properties of an object -->
    Car: {{brand.name}}
    <ul>
        <li ng-repeat="type in brand.types">{{type}}</li>
    </ul>
</div>

如果您可以更改JSON以更好地适应您的表单组织，那将是最好的。否则，您可以使用一些javascript来转换数据:

$scope.data = {};
$scope.originalJson.forEach(function (obj) {
    var key = obj.car;
    if ($scope.data[key] === undefined) {
        $scope.data[key] = {
          name: key,
          types: []
        };
    }
    $scope.data[key].types.push(obj.type);
});

如果更改该数据的形式不会影响应用程序的其他部分，则此想法有效。显然，这可能不是最好的选择，但它确实适用于您的问题。

Answer 3

这里可以使用ng-if和ng-if="item.car != cars[$index-1].car"

<div ng-app="myApp" ng-controller="myCtrl" id="add-container-access" ng->
    <input type="text" ng-model="query">
    <ul>
      <li ng-repeat="item in cars|filter: query" ng-class="{'hide-list-style':!showCar}" 
        ng-init="showCar = (item.car != cars[$index-1].car)">
        <h4 ng-if="showCar">Car:{{item.car}}</h4>
        <h4>Type:{{item.type}}</h4>
      </li>
      <ul>
</div>

工作Plunkr