Question

我是Angular和Web编程的新手。我正在为一个客户开展项目，该客户的主要职能是处理客户订单。代客将被定向到一个页面，在那里将有一个返回客户特定订单的服务电话。单个订单显然可以包含许多商品（在这种情况下，这些商品可以全部来自不同的零售商I.E 1项来自亚马逊，2来自ebay等）

我需要做的是让页面遍历整个订单，并且一次只显示一个项目。代客将验证/下达该项目的订单，然后点击下一步＆＃39;继续前进到订单中的下一个项目，直到完成。我使用ng-repeat并显示整个订单，所以我的问题是如何一次将其限制为单个项目？ ng-repeat甚至是使用正确的指令吗？

提前感谢您的任何帮助，如果我能澄清任何事情，请告诉我。

Answer 1

我认为ng-repeat不是答案，在这种情况下，您最好使用索引遍历项目，甚至在范围上创建currentItem并绑定到它。

由于第一个选项更容易展示（但不是更优雅的选项），我制作了这个选项：http://plnkr.co/edit/R1639k71qiCiOOoeGz84?p=preview

  <div ng-show="currentItemIndex < order.items.length">
      Item n. {{order.items[currentItemIndex].number}}<br/>
      Description<br/> 
      {{order.items[currentItemIndex].description}}<br/>
      <button ng-click="nextItem()">Next</button>
  </div>

请看一下，看看这是否是你正在寻找的东西，作为一个很好的练习，fork那个plunkr并让它直接绑定到$scope变量，所以它看起来像这样：

  <div ng-show="currentItem">
      Item n. {{currentItem.number}}<br/>
      Description<br/> 
      {{currentItem.description}}<br/>
      <button ng-click="nextItem()">Next</button>
  </div>

看看它更容易阅读？而且，如果情况一直如此，您可以逐个从服务器中检索您的订单商品，哈哈。

在nextItem()上，您也可以添加所需的验证。

希望有所帮助

Answer 2

我想说如果你想让它变得优雅，你还有很长的路要走。继续学习！

但如果它＆＃34;工作＆＃34;你需要，然后是这里的简单例子。

假设您的数据结构为

// order
{
  id: 1,
  items: [{
    id: 1,
    retailer: 'Amazon',
    name: 'Egg slicer',
    amount: 1,
    ordered: false
  },{
    id: 2,
    retailer: 'Gadget.com',
    name: 'Apple peeler',
    amount: 2,
    ordered: false
  },{
    id: 3,
    retailer: 'ZOMG!',
    name: 'Nose warmer',
    amount: 3,
    ordered: false
  }]
};

然后你可以迭代并改变每个项目的状态。使用例如：

<h1>Verify order</h1>
<div>
  <div ng-init="current = 0; item = order.items[current]">
    <table class="table">
      <thead>
        <tr>
          <th colspan="2">{{ item.retailer }}</th>
        </tr>
        <tr>
          <th>Item</th>
          <th>Amount</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{{ item.name }}</td>
          <td>{{ item.amount }}</td>
        </tr>
      </tbody>
    </table>
    <button ng-show="current > 0" ng-click="current = current - 1; item = order.items[current]">Back</button>
    <button ng-show="current >= 0 && current <= order.items.length" ng-click="order.items[current].ordered = !order.items[current].ordered">(De)select</button>
    <button ng-show="current < order.items.length - 1" ng-click="current = current + 1; item = order.items[current]">Next</button>
  </div>
</div>    
<hr />    
<div>
  <span>Ordered so far...<br /></span>
  <ul>
    <li ng-repeat="item in order.items | filter: { ordered: true }">
      {{ item.name }}
    </li>
  </ul>
</div>

哪个收益

imgur

相关的plunker可以在http://plnkr.co/edit/ST9ki2

找到

AngularJs：ngrepeat单步执行订购商品

2 个答案: