Javascript 使用ng repeat将按不同类别排序的所有项目打印成行

因此，我设法以一种非常混乱的方式从列表中打印出项目，这非常需要重构

假设我有一组对象，比如

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>

工具


名称：{{item.Name}

价格：£{item.Price}



器具


名称：{{item.Name}

价格：£{item.Price}

有没有办法让事情变得不那么混乱？我是否需要将对象预分类到控制器中的不同数组中？还是有更好的方法使用filterBy方法

编辑

理想情况下，生成的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>

器具


名称：烤面包机

价格：10英镑



名称：微波炉

价格：10英镑



工具


名称：锄头

价格：5英镑



姓名：黑桃

价格：5英镑

---

它看起来应该是这样的

如果我正确理解了这个问题，那么您实际上要查找的是您希望根据“category”键对数据进行排序

为了进行排序，您应该使用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>

按类别排序


名称：{{item.Name}

价格：£{item.Price}

这应该能奏效

---

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

可能是您可以在容器上添加另一个ng repeat:[['Tool'，'Tool'，['Appliances'，'Appliances'，'Appliances']中的

类别，并在filterTool中使用
类别[1]
，而Appliances只是h3标记，与ng repeat无关，只是硬编码，否则每个列表元素都会在其上方打印类别，但我会立即尝试，但我希望在每个新类别列表的开头放置一个类别标题，使用orderBy方法是否可行？您能否提供您期望的HTML响应？它看起来像
Appliance:name:Toaster，价格：5，名称：微波炉，价格：5，工具：名称：黑桃，价格：10，名称：锄头，价格10，或类似的东西，很抱歉缩进，我真的不能让它在这些小评论中正常工作。你可以编辑你问的问题，你可以在那里提供。很难理解我所做的更改所期望的HTMLOk，很抱歉造成混淆