角度：ng-clickで関数内でモデルの配列値が未定義です

Question

ユーザーが数量をテキストボックスに追加できるようにしようとしています。私は製品の配列を持ち、各製品にはそのプロパティが含まれています。私のサービスは配列リストを含んでいます。

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$'}] 
}] 

products配列を反復します。ユーザーが製品をクリックすると、製品のショーページが表示されます。ここでは製品のすべての情報を表示しています。プロパティの場合、ユーザーが各サイズの直後に数量を追加できるテーブルを表示しています。

<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> 

質問：だから、この表によると、各行は、名前の追加とボタンが含まれています。追加ボタンを数量追加したユーザーは、カートに商品を追加することができます。ここで私はサイズがaddToCart機能になっていますが、それぞれのサイズの配列でなければならないので、未定義の数量があります。私はサイズを取得していますが。しかし、私はそれをどうやって行うのか分かりません。

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

私は助けが必要です。

Answer 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>

Answer 2

私は=テキストボックスが

$ scope.qty のような通常のスコープ変数にバインドしないことを何度も気づき、NG-モデルとビューでそれを結合しています"数量"

$ scope.qty = {のようなものを使用してみてください。テキスト：」 ' }

とあなたのテキストボックスが実際にバインドされていることを確認しますビュー

でNG-モデル= 『qty.text』として、それをバインドします。

Answer 3

この問題を解決する簡単なこと：init qty by $ scope.qty = 0;