使用 NG-重复将按不同类别排序的所有项目打印成行

using ng-repeat to print out all items sorted by different categories into rows

本文关键字：项目 打印 排序 NG- 同类 使用      更新时间：2023-09-26

所以，我设法以一种非常混乱的方式从列表中打印出

项目，迫切需要重构

假设我有一个对象数组，例如 

var items = [{name: "toaster", price: 10, category: "appliance"},{name: "spade", price: 5, category: "tool"},{name: "hoe", price: 5, category: "tool"},{name: "microwave", price: 10, category: "appliance"}]

使用 ng-repeat，我想根据类别将每个项目的名称和价格打印成一行，而不必有很多混乱的代码。 目前我的代码如下所示：

<section class="container">
      <div class="row"> 
    <h3>Tool</h3>
        <ul class="list-group col-lg-2 col-sm-3 col-xs-4" ng-repeat="item in ctrl.items | filter: { category:'tool'}">
          <li class="list-group-item">
            <p>Name: {{item.name}} </p>
            <p>Price: £{{item.price}} </p>
          </li>
        </ul>
      </div>
  </section>
      <section class="container">
      <div class="row"> 
    <h3>Appliances</h3>
        <ul class="list-group col-lg-2 col-sm-3 col-xs-4" ng-repeat="item in ctrl.items | filter: { category:'appliance'}">
          <li class="list-group-item">
            <p>Name: {{item.name}} </p>
            <p>Price: £{{item.price}} </p>
          </li>
        </ul>
      </div>
  </section>

有没有办法让这个不那么混乱？ 我是否必须将对象预置到控制器中的不同数组中？ 或者有没有更好的方法来使用过滤器方法？

编辑

理想情况下，生成的 html 应如下所示

<section class="container">
          <div class="row"> 
        <h3>Appliance</h3>
          <ul>
              <li class="list-group-item">
                <p>Name: Toaster </p>
                <p>Price: £10</p>
              </li>
             <li class="list-group-item">
                <p>Name: Microwave</p>
                <p>Price: £10</p>
              </li>
            </ul>
           <h3>tool</h3>
 <ul>
              <li class="list-group-item">
                <p>Name: Hoe</p>
                <p>Price: £5</p>
              </li>
             <li class="list-group-item">
                <p>Name: Spade</p>
                <p>Price: £5</p>
              </li>
            </ul>
          </div>
      </section>

它应该看起来像那样

如果我正确理解了这个问题，您实际上正在寻找的是您要根据"类别"键对数据进行排序。

出于排序目的，您应该使用angularjs提供的"orderBy"过滤器。 

<section class="container">
      <div class="row"> 
    <h3>Sort By Category</h3>
        <ul class="list-group col-lg-2 col-sm-3 col-xs-4" ng-repeat="item in ctrl.items | orderBy: 'category'">
          <li class="list-group-item">
            <p>Name: {{item.name}} </p>
            <p>Price: £{{item.price}} </p>
          </li>
        </ul>
      </div>
  </section>

这应该可以解决问题。

有关更多信息，您可以参考此链接

相关文章：