Question

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

说我有像

这样的对象数组

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>

有没有办法减少这个问题？我是否必须将对象预先分配到控制器中的不同数组中？或者有更好的方法来使用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>

看起来应该是那样的

Answer 1

如果我已正确理解了这个问题，那么您实际需要的是根据“类别”键对数据进行排序。

出于排序目的，您可以使用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>

这应该可以解决问题。

有关详细信息，请参阅此link

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

1 个答案: