javascript - 点击事件解耦

Question

我的 Angular 代码位于 Plunkr

这不是学校测试或其他任何东西。这是我自己对AngularJS的一些前端处理的尝试和实验，所以请随时帮助我。

该代码包含两个 ng-repeats div，它们是父 Controller 的子级。这两个 ng-click 以某种方式交织在一起，并在他们的行为中保持警惕。我尝试使用不同的切换功能toggleLaptopChoice、toggleTVChoice，但无法让它们正常工作。

问题:

1- 产品列表:购买 2 台电视将在笔记本电脑部分列出它们。

2- 电视产品覆盖笔记本电脑产品。

1和2是耦合和解耦问题。另外，如何将 {{laptop.product}}、{{television.product}} 绑定(bind)到 ng-click 标签？ ng-click 应该在标签处还是在输入本身处？

3- 如何绑定(bind)手续费，以便费用更改时总计会自动更新？ (我有点考虑添加一个指令，但有点希望两个 Ctrl 来处理所有事情，而不是需要额外的服务)。

4- 我是否很好地处理了范围？为我提供更好的方法来处理总计(总计|求和计算)

5- 优化示例代码的进一步建议？更大的灵 active 、清晰度和更少但有用的抽象。

也许，进一步开发每种产品的数量。购买支票将成为将产品从购物车中删除的一种手段。

非常感谢。

<div ng-form name="orderForm" ng-controller= "shoppingListCtrl as sl">
  <label for="">Configurate (backend) Handling fee: USD$ </label>
  <input type="number" name="fee_input" ng-model="sl.fee" ng-init="sl.fee=7.50"/>
  <span class="error" ng-show="orderForm.fee_input.$error.number">
        Not valid number!</span>
  <!-- need ng-form name="orderForm" in div to trigger validation on ng-show "orderForm.fee_input" -->
  <br>
  <br>
  <div ng-controller= "merchandiseListCtrl as ml" style="border: 2px solid olive; padding:0 0 1em 1em">
    <h3>Laptop List</h3>
    <table>
      <thead>
        <tr>
          <th>Product</th>
          <th>Purchased</th>
          <th>Price</th>
          <th>Tax</th>
        </tr>
      </thead>
      <tr ng-repeat="laptop in ml.laptops">
        <td>{{laptop.product}}</td>
        <td>
          <!--<label for="laptopCheck" ng-click="$event.stopPropagation();"> http://stackoverflow.com/a/26962680/5828821-->
          <label for="laptopCheck" ng-click="ml.toggleHandler(laptop, ml.laptops, ml.laptopTotal, sl.fee);">
            <!--<input id="laptopCheck" type="checkbox" class="ng-pristine ng-valid" ng-click="ml.toggleSelection($event,laptop)" ng-model="laptop.purchased" ng-init="laptop.purchased=false">-->
            <input id="laptopCheck" type="checkbox" ng-model="laptop.purchased">
          </label>
        </td>
        <td>{{laptop.price}}</td>
        <td>{{$parent.sl.tax}}</td>
      </tr>
    </table>

    <!-- display the selection -->
    Laptop count: {{ ml.laptopTotal.count }} units
    <br>
    <div ng-if="ml.laptopTotal.products">
      <ul ng-repeat="product in ml.laptopTotal.products">
        <li>{{$index+1}}) {{product}}</li>
      </ul>
    </div>
    <br>
    Price for selected laptops before tax: {{ml.laptopTotal.value | currency:"USD$ ":2 }}
    <br>
    Taxing info: {{ml.getTax()}} %

    <br>
    <h3>Television List</h3>
    <table>
      <thead>
        <tr>
          <th>Product</th>
          <th>Purchased</th>
          <th>Price</th>
          <th>Tax</th>
        </tr>
      </thead>
      <tr ng-repeat="television in ml.televisions">
        <td>{{television.product}}</td>
        <td>
          <label for="televisionCheck" ng-click="ml.toggleHandler(television, ml.televisions, ml.televisionTotal, sl.fee);">
            <input id="televisionCheck" type="checkbox" ng-model="television.purchased">
          </label>
        </td>
        <td>{{television.price}}</td>
        <td>{{$parent.sl.tax}}</td>
      </tr>
    </table>
    TV count: {{ ml.televisionTotal.count }} units
    <br>
    <div ng-if="ml.televisionTotal.products">
      <ul ng-repeat="product in ml.televisionTotal.products">
        <li>{{$index+1}}) {{product}}</li>
      </ul>
    </div>
    <br>
    Price for selected televisions before tax: {{ml.televisionTotal.value | currency:"USD$ ":2 }}
    <br>
    Taxing info: {{ml.getTax()}} %
    <br>
    <label for="">$scope element: </label>{{access.child}}
    <br>
    _____________________________________________________________________________
    <br>
    <br>
    <label for="">Grand Total: </label>{{ml.televisionTotal.altogether | currency:"USD$ ":2 }}
    <br>
    <br>
    ________________STILL INSIDE the scope of <strong>merchandiseListCtrl</strong>________________
  </div>
    <br>

  ______________NOW <strong>OUTSIDE that scope</strong>, it's shoppingList scope NOW______________
  <br>This is a <i>{{access.child}}</i>
  <br>
  <br>
  <span style='color:gray'>Formula for total: TOTAL = (total of selected laptops + total of selected televisions)*((100+tax)/100) +handling_fee</span>
  <br>
  <strong>Shopping at {{sl.market}}, the total for your cart <span ng-if="sl.count"> ( {{sl.count}} items ) </span> is {{ sl.total | currency:"USD$ ":2}}</strong>
  Your shopping cart to checkout:
  <br>
  <div ng-if="ml.products">
    <ul ng-repeat="product in ml.products">
      <li>{{$index+1}}) {{product}}</li>
    </ul>
    <br>
    The user interactive, selected data can be further proceeded through a form Submit button for back-end processing.
  </div>

</div>

Answer 1

我解决了我的问题 1,2 和 3(简单的 $watch 就可以完成工作)。请参阅 Plukr 了解测试结果。

所选的笔记本电脑和电视产品只是数组，因此将它们推送到新数组而不是尝试对象合并更有意义。

4 和 5 等待您的建议和帮助。另外，如何将产品名称绑定(bind)到复选框？单击华硕也会切换该复选框。