Angular：ng模型数组值在ng-click上的函数中未定义答案

【问题标题】：Angular : ng model array values got undefined in function on ng-clickAngular：ng模型数组值在ng-click上的函数中未定义
【发布时间】：2016-07-15 06:39:04
【问题描述】：

我试图让用户在文本框中添加数量。我有产品数组，每个产品都包含它的属性。我的服务包含数组列表。

products = [{
   id: 1,
   name: 'X Product',
   face: 'img/x_p.png',
   available_size: 6,
   color_available: 0,
   sizes: ['10"', '20"', '30"'],
   properties: [{size: '10"', mrp: '10$'},
              {size: '20"', mrp: '15$'},
              {size: '30"', mrp: '20$'}]
 },
 {
   id: 2,
   name: 'Y Product',
   face: 'img/y_p.png',
   available_size: 6,
   color_available: 0,
   sizes: ['10"', '20"', '30"'],
   properties: [{size: '10"', mrp: '10$'},
              {size: '20"', mrp: '15$'},
              {size: '30"', mrp: '20$'}]
}]

遍历产品数组。当用户点击产品时，它会显示一个产品展示页面。我在哪里显示产品的所有信息。对于属性，我显示了一个表格，用户可以在每个尺寸之后添加他们的数量。

<div style="margin-bottom: 20px;">
  <h4>
    Product Detail
  </h4>
  <table>
    <tbody>
      <tr class="tableHeader">
        <td>Size</td>
        <td>MRP</td>
        <td>Quantity</td>
      </tr>
      <tr ng-repeat="(key, property) in product.properties">
        <td>{{  property['size']  }}</td>
        <td>{{  property['mrp']  }}</td>
        <td>
          <input type="number" placeholder="QTY" ng-model="qty">
        </td>
        <td>
          <a href="javascript:;" class="button" ng-click="addToCart(property['size'], qty)">
        Add
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

问题：所以根据这张表，每一行都包含一个名为 add 的按钮。因此，在添加数量后，用户单击添加按钮将允许他们在购物车中添加商品。在这里，我在 addToCart 函数中获取了大小，但得到了未定义的数量，因为它应该是一个具有各自大小的数组。虽然我变大了。但我不知道该怎么做。

$scope.addToCart = function(size, qty) {
  alert($scope.qty)
}

我需要帮助。

【问题讨论】：

你应该 alert(qty) 看看参数值是否正常
@BorcheIvanov 相同结果
我正在增加尺寸但没有获得数量

标签： angularjs ionic-framework angularjs-ng-repeat angularjs-ng-model ng-bind

【解决方案1】：

var app = angular.module("MyApp", []);

app.controller("MyCtrl", function() {
  this.addToCart = function(property, qty) {
    property["qty"] = qty;
  }
  this.product = {
    id: 1,
    name: 'X Product',
    face: 'img/x_p.png',
    available_size: 6,
    color_available: 0,
    sizes: ['10"', '20"', '30"'],
    properties: [{
      size: '10"',
      mrp: '10$'
    }, {
      size: '20"',
      mrp: '15$'
    }, {
      size: '30"',
      mrp: '20$'
    }]
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div style="margin-bottom: 20px;" ng-app="MyApp">
  <div ng-controller="MyCtrl as ctrl">
    <h4>
    Product Detail
  </h4>
    <table>
      <tbody>
        <tr class="tableHeader">
          <td>Size</td>
          <td>MRP</td>
          <td>Quantity</td>
        </tr>
        <tr ng-repeat="(key, property) in ctrl.product.properties">
          <td>{{ property['size'] }}</td>
          <td>{{ property['mrp'] }}</td>
          <td>
            <input type="number" placeholder="QTY" ng-model="qty">
          </td>
          <td>
            <a href="javascript:;" class="button" ng-click="ctrl.addToCart(property, qty)">
        Add
          </a>
          </td>
        </tr>
      </tbody>
    </table>
    <hr/>
    {{ctrl.product.properties}}
  </div>
</div>

【讨论】：

我应该使用 ctrl 还是我可以坚持使用我的控制器。我的意思是我正在使用我自己的控制器，那么这会起作用还是我可以用 $scope 定义？
您可以使用您的控制器，只需定义一个变量（别名）并使用它，然后您就不需要$scope。看看我如何创建MyCtrl 的范围，然后使用ctrl. 表示法
很好且非常快速的答案 :) 感谢您的帮助。

【解决方案2】：

我多次注意到文本框不会绑定到像

这样的普通范围变量

$scope.qty 并使用 ng-model="qty" 将其绑定到视图中

请尝试使用类似的东西

$scope.qty = { 文本：' ' }

并在视图中将其绑定为 ng-model="qty.text"

这将确保您的文本框实际被绑定。

【讨论】：

【解决方案3】：

解决这个问题的简单方法：init qty by $scope.qty = 0;

【讨论】：