Question

我有一些物品，让我们说它们是汽车。我正在使用重复列表来列出它们汽车也有轮胎。假设我想列出所有轮胎选项，但是有几种不同类型的轮胎，所以我们想根据它们的类型{夏季，公路，赛车等......来分开它们）：

<div class="col-md-4" ng-repeat="individualCar in allCars" ng-show="CarTypeFilter[individualCar.type]">
  <div class="">
    {{individualCar.name}}
  </div>
  <ul>
    <!-- This is the list of all one type of tires --> 
    <li class="TireType1" ng-repeat="tire in individualCar.tires" ng-show="CarTireFilter[tire.type]">
        {{tire.name}}
    </li>
    <!-- This is another list of all another type of tires --> 
    <li class="TireType2" ng-repeat="tire in individualCar.tires" ng-show="CarTireFilter[tire.type]">
        {{tire.name}}
    </li>
  </ul>
</div>

这不太合适，因为Controller $范围内每辆车没有单独的轮胎类型列表，我不确定是否需要构建一个参考轮胎类型。如何使用ng-repeat单独过滤或列出轮胎类型？
我计划以不同的方式设计它们，因此需要区分。

示例JSON：

{
  "jokes":[
    {
      "id:":1,
      "name":"Tesla",
      "type":"CAR",
      "Tires":[
        {
          "id":1,
          "type": "summer",
          "name":"Goodyear"
        },
        {
          "id":2,
          "type": "summer",
          "name":"Kuhmo"
        },
        {
          "id":3,
          "type": "winter",
          "name":"Perelli"
        },
        {
          "id":4,
          "type": "racing",
          "name":"Cooper"
        }
      ]
    },
    {...}
  ]
}

在控制器中，我有一个关联数组，它存储不同类型{summer，racing等）作为键，以及一个布尔值，这样当他们想要通过复选框查看每个选项时，项目显示在ng-repeat：

 $scope.CarTireFilter = {"summer":true, "racing":false, ... };

Answer 1

如果您只想通过某些特定的属性显示列表中的项目，那么您需要一个过滤器。请参阅Filter & OrderBy的文档。

请勿使用此版本：

div class="col-md-4" ng-repeat="individualCar in allCars| 
                                filter: SET CONDITIONS HERE |
                                orderBy: SET CONDITIONS HERE">

我想建议的另一件事是，如果你要根据各种类型添加样式。您可能希望使用ng-style以更有棱角的方式进行此操作。查看文档ng-style。这种方法允许您根据类型添加所需的样式，而不一定需要具有不同类的单独li标签。你应该尝试让角度处理这个。

使用ng-repeat在AngularJs中按类型列出项目

1 个答案: