在制作手机教程时，我想知道如何实现这个用例
- 浏览器呈现电话列表
- 用户点击其中一个手机的
add phone - 函数
addItem被触发并将此电话添加到数组phonesInCart - 手机在购物车
$scope.phonesInCart = [];的列表被更新
我的codepen演示具有与此代码相同的逻辑
<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?
在您的代码中，您需要做的不是phonesInCart.push(phone)，而是:
$scope.phonesInCart.push(phone)
因为这是你在html中循环的变量。
EDIT由于addItem调用是作为ng-click指令的一部分发生的，因此您可以摆脱$scope.$apply。实际上，你应该得到一个错误，说'digest loop already in progress'与您当前的代码。
我稍微编辑了一下你的代码。
- 首先，正如其他人已经指出的那样，当你进入手机阵列时，你错过了一个
$scope。 - 其次，如果您希望能够将多个相同的手机添加到列表中，则需要将
track by $index添加到ng-repeat中，以便它接受"副本"。 - 你也有一个不必要的
$scope.apply在你的addPhone函数-你不需要手动更新;当你push到作用域变量数组时，它会触发摘要循环。 - 最后，由于相同的原因，您不需要
$watchphonesInCart数组。
这是一支更新过的笔，所有这些变化都已经发生了。如果你还有什么问题，请提问:)