ng-repeat 的高妙用法 —— 多重过滤与分组-JavaScript中文网-JavaScript教程资源分享门户

在 AngularJS 中，ng-repeat 是一个非常常用的指令，它允许我们通过循环遍历数据来动态生成 HTML 元素。通常情况下，我们使用 ng-repeat 来展示列表数据，例如商品列表、新闻列表等。但是，ng-repeat 还有一些高妙的用法，本文将介绍其中的两种：多重过滤和分组。

多重过滤

在实际开发中，我们经常需要对列表数据进行多重过滤，例如根据价格、品牌、颜色等条件来筛选商品。使用 ng-repeat，我们可以非常方便地实现这个功能。

首先，我们需要定义一个数组 $scope.products，其中包含多个商品对象。每个商品对象包含价格、品牌、颜色等属性。例如：

$scope.products = [
  { name: 'iPhone X', price: 7999, brand: 'Apple', color: 'Silver' },
  { name: 'Galaxy S9', price: 5999, brand: 'Samsung', color: 'Black' },
  { name: 'Mate 10', price: 3999, brand: 'Huawei', color: 'Gold' },
  { name: 'Mi 6', price: 2499, brand: 'Xiaomi', color: 'Black' },
  { name: 'OPPO R11', price: 3199, brand: 'OPPO', color: 'Rose Gold' }
];

接着，在 HTML 中使用 ng-repeat 指令来展示商品列表。我们可以使用 ng-repeat 的 filter 参数来实现多重过滤。例如，下面的代码实现了根据价格和品牌来过滤商品列表：

<div ng-repeat="product in products | filter: { price: priceFilter, brand: brandFilter }">
  <p>{{product.name}} - {{product.price}} - {{product.brand}}</p>
</div>

其中，priceFilter 和 brandFilter 是两个输入框，用户可以在这里输入价格和品牌的过滤条件。我们可以在控制器中定义这两个变量：

$scope.priceFilter = '';
$scope.brandFilter = '';

当用户输入过滤条件后，ng-repeat 会自动根据条件来过滤商品列表。例如，当用户输入价格为 5000，品牌为 Apple 时，只有 iPhone X 会被展示出来。

分组

除了多重过滤外，ng-repeat 还支持将列表数据按照某个属性值进行分组。例如，我们可以将商品按照品牌进行分组，然后在页面中展示出来。

首先，我们需要在控制器中定义一个数组 $scope.groups，其中包含多个分组对象。每个分组对象包含一个 name 属性和一个 items 属性。name 属性表示分组的名称，items 属性表示该分组下的商品列表。例如：

// javascriptcn.com 代码示例
$scope.groups = [
  { name: 'Apple', items: [
    { name: 'iPhone X', price: 7999, brand: 'Apple', color: 'Silver' },
    { name: 'iPad Pro', price: 5888, brand: 'Apple', color: 'Gold' }
  ]},
  { name: 'Samsung', items: [
    { name: 'Galaxy S9', price: 5999, brand: 'Samsung', color: 'Black' },
    { name: 'Galaxy Note 8', price: 6899, brand: 'Samsung', color: 'Blue' }
  ]},
  { name: 'Huawei', items: [
    { name: 'Mate 10', price: 3999, brand: 'Huawei', color: 'Gold' },
    { name: 'P20', price: 4999, brand: 'Huawei', color: 'Black' }
  ]}
];

接着，在 HTML 中使用 ng-repeat 指令来展示商品列表。我们可以使用 ng-repeat 的 group-by 参数来实现分组。例如，下面的代码实现了根据品牌来分组：

<div ng-repeat="(groupName, groupItems) in groups | groupBy: 'brand'">
  <h3>{{groupName}}</h3>
  <div ng-repeat="item in groupItems">
    <p>{{item.name}} - {{item.price}} - {{item.color}}</p>
  </div>
</div>

其中，groupBy 参数的值为 brand，表示按照品牌进行分组。ng-repeat 会自动将商品按照品牌分组，并且将分组名称和分组下的商品列表传递给 ng-repeat。我们可以在 HTML 中使用这些数据来展示商品列表。例如，上面的代码将每个分组的名称显示为一个标题，然后将该分组下的商品列表展示出来。

总结

本文介绍了 ng-repeat 的两种高妙用法：多重过滤和分组。这两种用法可以大大提高我们的开发效率，让我们能够更加方便地展示列表数据。希望本文能够对大家有所帮助，谢谢阅读！

示例代码：https://codepen.io/anon/pen/pxrjKx

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6558679bd2f5e1655d296239