Fatal编程技术网
  • javascript/
  • Javascript 将项目添加到模型并刷新第二个ng重复

Javascript 将项目添加到模型并刷新第二个ng重复

javascript angularjs

Javascript 将项目添加到模型并刷新第二个ng重复,javascript,angularjs,angularjs-ng-repeat,Javascript,Angularjs,Angularjs Ng Repeat,在编写电话教程时，我想知道如何实现这个用例 浏览器呈现电话列表 用户单击其中一部手机的addphone 启动函数addItem，将此手机添加到阵列phonesInCart中 购物车中有电话的列表$scope.phonesInCart=[]已更新 我的与此代码具有相同的逻辑 <body ng-controller="PhoneListCtrl"> <h3>Phones we sell</h3> <ul class="phones"> <li

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

  • 浏览器呈现电话列表
  • 用户单击其中一部手机的
    addphone
  • 启动函数
    addItem
    ，将此手机添加到阵列phonesInCart中
  • 购物车中有电话的列表
    $scope.phonesInCart=[]已更新
    • 我的与此代码具有相同的逻辑

    <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>
    现状 将呈现列表并启动“addItem”函数。 当前，购物车中的电话列表未更新/未呈现

    我的问题 你能解释一下吗

    • 如何填充第二个数组
      phonesInCart[]
      并刷新另一个
      ng repeat
      和
    • 我是否必须创建/使用多个控制器
      phonecatApp.controller（'PhoneListCtrl'…
      ，才能进行secon
      ng repeat
    在您的代码中，您需要执行以下操作，而不是
    电话推送（电话）
    ：

    $scope.phonesInCart.push(phone)
    因为这是在html中循环的变量

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

    我稍微编辑了您的代码笔代码

    • 首先，正如其他人已经指出的，当你进入手机阵列时，你错过了一个
      $scope
    • 其次，如果您希望能够将多部相同的手机添加到列表中，则需要将
      track by$index
      添加到ng repeat中，以便它接受“重复”
    • 您还有一个不必要的
      $scope。在addPhone函数中应用
      ——您不需要手动更新它；当您推送到scope变量数组时，它会触发摘要循环本身
    • 最后，由于与上面相同的原因，您不需要
      $watch
      phonesInCart数组
    如果您还有其他问题，请执行：）

    我在
    $scope.phonesInCart.push（phone）
    中添加了您的行
    $scope.addItem=function（phone）{…
    并删除了“$scope.$apply（）您将看到angular抛出错误。如果多次单击a按钮（以增加电话数量），angular报告
    错误：[ngRepeat:dupes]
    。但是写入
    phonecatApp.filter（'getById'，function（）{
    。你能帮我检查一部手机是否已经在数组中吗
    phonesInCart
    ？我看到
    • 因为同一部手机可以多次添加到数组中
    phonesInCart
    。我更喜欢的选择是增加某部手机的数量。 
    $scope.phonesInCart.push(phone)