点击事件解耦

Question

我在Plunkr有我的Angular代码

这不是学校的考试什么的。这是我自己对AngularJS的一些前端处理的试用和实验，所以请随时帮助我。

该代码包含两个ng-repeats div，子控制器为父控制器。这两个ng-click以某种方式交织在一起，并对它们的行为保持警惕。我尝试了不同的切换函数toggleLaptopChoice，toggleTVChoice，但无法让它们正常工作。

问题：

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

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

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

3-如何绑定手续费，当手续费发生变化时，合计会自动更新？(我在考虑添加一个指令，但我想让两个Ctrls来处理所有事情，而不是需要额外的服务)。

4-我处理好作用域了吗？提供更好的方法来处理合计(合计|合计计算)

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

也许，进一步开发每种产品的数量。购买检查将成为将产品从购物车中丢弃的一种手段。

非常感谢。

<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等待您的建议和帮助。另外，如何将产品名称绑定到复选框？点击华硕也会切换复选框。