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

【问题标题】：Adding item to model and refresh a second ng-repeat将项目添加到模型并刷新第二个 ng-repeat
【发布时间】：2015-10-15 00:16:36
【问题描述】：

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

浏览器呈现手机列表
用户为其中一部手机点击add phone
函数addItem 被触发并将此手机添加到数组phonesInCart 中
购物车中的手机列表$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();
}

当前状态

列表被渲染，“addItem”函数被触发。目前购物车中的手机列表未更新/未呈现。

我的问题

你能解释一下吗

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

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat

【解决方案1】：

在您的代码中，您需要执行以下操作，而不是 phonesInCart.push(phone)：

$scope.phonesInCart.push(phone)

因为这是您在 html 中循环的变量。

EDIT 由于addItem 调用是ng-click 指令的一部分，因此您可以去掉$scope.$apply。实际上，您当前的代码应该会收到一条错误提示“摘要循环已在进行中”。

【讨论】：

我在$scope.addItem = function(phone) { ... 中添加了你的行$scope.phonesInCart.push(phone) 并删除了`$scope.$apply();`，它似乎有效：codepen.io/anon/pen/PqyGXY
太棒了！请注意，作为对角度操作的响应而发生的任何事情，例如 ajax 请求回调（使用 $http 时）、ng-click 处理程序或 ng-mouseover 等，总是在 $scope.$ 内执行。 apply(..)，所以你不需要自己调用它。如果你这样做了，（你可以在你的 web 控制台中看到）你会看到 angular throw 一个错误。
如果一个按钮被多次点击（增加手机数量）角度报告Error: [ngRepeat:dupes]。 This answer contains a way to filter an array 但写作 phonecatApp.filter('getById', function() { did not work for me。你能帮我如何检查电话是否已经在数组phonesInCart中？

【解决方案2】：

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

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

Here's an updated pen 已对其进行了所有这些更改。如果你还有什么要问的，请做:)

【讨论】：

我看到<li ng-repeat="phoneInCart in phonesInCart track by $index"> 因为可以将同一电话多次添加到数组phonesInCart 中。我更喜欢的选择是增加某部手机的数量。