Question

在处理手机教程时，我想知道如何实现这个用例

浏览器呈现手机列表
用户点击其中一部手机的add phone
触发了函数addItem并将此手机添加到数组phoneInCart
购物车$scope.phonesInCart = [];中的手机列表已更新

我的 codepen demo 与此代码具有相同的逻辑

<body ng-controller="PhoneListCtrl">
<h3>Phones we sell</h3>
<ul class="phones">
  <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
    <b>{{phone.name}} </b>
    <button ng-click="addItem(phone)"
            ng-disabled="{{phone.orderReadonly}}">add phone</button>
  </li>
</ul>

<h3>Phones in your cart</h3>
<ul>
  <li ng-repeat="phoneInCart in phonesInCart"> 
    {{phoneInCart.name}}
  </li> 
</ul>
</body>

和相关的javascript

$scope.phonesInCart = [];
$scope.addItem = function(phone) { 
    // these lines have no effect on the ui
    phonesInCart.push(phone);
    $scope.$apply();
}

当前状态

列表已呈现，并且＆＃39; addItem＆＃39;功能被解雇了。目前，购物车中的手机列表未更新/未呈现。

我的问题

你能解释一下

要填充第二个数组phonesInCart[]并刷新另一个ng-repeat和
我是否必须创建/使用多个控制器phonecatApp.controller('PhoneListCtrl' ...才能拥有secon ng-repeat？

Answer 1

在您的代码中，您需要执行以下操作：

，而不是phonesInCart.push(phone)

$scope.phonesInCart.push(phone)

因为那是你在html中循环的变量。

编辑由于addItem调用作为ng-click指令的一部分发生，您可以摆脱$scope.$apply。实际上，您应该使用当前代码收到错误消息“正在进行消化循环”。

Answer 2

我稍微编辑了你的codepen代码。

首先，正如其他人已经指出的那样，当你推入手机时，你错过了$scope。
其次，如果您希望能够将多个相同的手机添加到列表中，则需要将track by $index添加到ng-repeat中，以便接受＆＃34;重复＆＃34;。< / LI>
您的addPhone功能中还有一个不必要的$scope.apply - 您不需要手动更新它;当你推送到范围变量数组时，它会触发摘要循环本身。
最后，由于与上述相同的原因，您不需要$watch个phoneInCart阵列。

已完成所有这些更改的

Here's an updated pen。如果您还有其他要求，请执行以下操作：）

将项目添加到模型并刷新第二个ng-repeat

当前状态

我的问题

2 个答案: