Question

我正在尝试在IONIC中使用推车（我也是使用此框架的新手）。我有一个ng-repeat来填充我的屏幕上的数据库（firebase）中的产品，在这个ng-repeat里面我有一个表单。我的表单包含3个元素，一个和一个按钮。当我填写表格并按添加。它工作正常。但如果我添加第二个产品，我的第一个产品会更新新产品的价值。例：

1）添加产品A. Qtd：3 unity：mg。 2）添加产品B. Qtd：8 utity：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

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

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

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>

ng-repeat更新所有表单

1 个答案: