javascript - ng-repeat 更新所有表单

Question

我正在尝试在 IONIC 中做一种购物车(我也是使用这个框架的新手)。我有一个 ng-repeat 用数据库(firebase)中的产品填充我的屏幕，在这个 ng-repeat 中我有一个表单。我的表单包含 3 个元素，一个和一个按钮。当我填写表格并按添加时。效果很好。但如果我添加第二个产品，我的第一个产品就会更新为新产品的值(value)。示例:

1) 添加产品 A。 Qtd:3 单位:mg。2)添加产品B。Qtd:8效用:g。

然后我的第一个产品变成:产品A。Qtd:8 unity:m8。

有人可以帮我吗？

遵循我的 HTML 和 JS

$scope.category = Category.name;   
    $scope.amount = {count: '', unit: 'mg'};

    function AddToCart(product, amount)
    {
        if(amount.count == null)
            return;
        
        if(!$rootScope.cart)
          $rootScope.cart = [];

        $rootScope.cart.push({
            item: product,
            qtd: amount
        });

        showToast();
    }

<div class="item item-product" id="{{$index}}-item" ng-repeat="item in vm.Products | filter:filter.product" >
                <p style="width: 95%; margin: 0;">{{item.name}}</p>
                <button class="arrow-button" ng-click="showDetails($index)" sytle = "border: none; width: 100%;"><i class="icon ion-ios-arrow-right"></i></button>
                <div class="details" id ="{{$index}}-details" style="z-index: 999;">
                    <hr>
                    <p> {{item.about}}</p>
                    <form class="cart-area" id ="{{$index}}-form" ng-submit="vm.AddToCart(item, amount,$index)">
                        <input type="number" id = "{{$index}}-input" ng-model="amount.count" placeholder="Qtd">
                        <div class="list">
                            <select ng-model="amount.unit">
                                <option>mg</option>
                                <option selected>g</option>
                                <option>kg</option>
                            </select>
                        </div>
                        <button><i class="fa fa-plus" aria-hidden="true"></i>Adicionar cotação</button>
                    </form>
                </div>
            </div>

Answer 1

好的，所以您走在正确的轨道上，但不太了解如何将控件绑定(bind)到特定产品 - 您将它们绑定(bind)到共享范围，这就是为什么当您更新一个时，您更新了所有他们。这就是 AngularJS 内置的双向数据绑定(bind)的本质。

您想要做的是将 ng-model 值绑定(bind)到项目本身的属性，如下所示:

var app = angular.module("myApp", [])
  .controller("myCtrl", ["$scope",
    function($scope) {
      var $this = this;
      $this.Products = [{
        name: "Product 1",
        about: "Info About Product 1",
        count: 3,
        unit: "mg"
      }, {
        name: "Product 2",
        about: "Info About Product 2",
        count: 8,
        unit: "g"
      }, {
        name: "Product 3",
        about: "Info About Product 3",
        count: 2,
        unit: "kg"
      }, ];
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as vm">
  <h3>Solution using properties on Products</h3>
  <div class="item item-product" id="{{$index}}-item" ng-repeat="item in vm.Products | filter:filter.product">
    <p style="width: 95%; margin: 0;">{{item.name}}</p>
    <div class="details" id="{{$index}}-details" style="z-index: 999;">
      <hr>
      <p>{{item.about}}</p>
      <div ng-form="{{$index}}-form" class="cart-area" ng-submit="vm.AddToCart(item, amount,$index)">
        <input type="number" ng-model="item.count" placeholder="Qtd">
        <div class="list">
          <select ng-model="item.unit">
            <option value="mg">mg</option>
            <option value="g">g</option>
            <option value="kg">kg</option>
          </select>
        </div>
        <button><i class="fa fa-plus" aria-hidden="true"></i>Adicionar cotação</button>
      </div>
    </div>
  </div>
</div>