在编写电话教程时，我想知道如何实现这个用例
- 浏览器呈现手机列表
- 用户点击
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和 - 我是否必须创建/使用多个 Controller
phonecatApp.controller('PhoneListCtrl' ...能够再过一次ng-repeat？
最佳答案
在您的代码中，您需要执行以下操作，而不是 phonesInCart.push(phone):
$scope.phonesInCart.push(phone)
因为这是您在 html 中循环的变量。
编辑 由于 addItem 调用是作为 ng-click 指令的一部分发生的，因此您可以摆脱 $scope .$应用。实际上，您当前的代码应该会收到一条错误消息“摘要循环已在进行中”。
关于javascript - 将项目添加到模型并刷新第二次 ng-repeat，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31608586/