ネストされたng-repeatのng-modelへのコントローラの角度アクセス

Question

トピックのように問題があります。 ng-modelで$ parentを使用しても役に立ちませんでした。 私が達成しようとしているのは、2つのクリック可能なボタンで、量フィールドの値を1つずつ増減し、サイトの最下部に概要（各価格の合計*量）を表示することです。

var app = angular.module("mainApp", []); 
 
    app.controller("mainCtrl", function ($scope) { 
 
    
 
    $scope.list1 = [ 
 
    { "uniqueId": "1", "name": "cat1" }, 
 
    { "uniqueId": "2", "name": "cat2" } 
 
    ]; 
 
    $scope.list2 = [ 
 
    { "uniqueId": "1", "name": "prod1", "price": "10" }, 
 
    { "uniqueId": "2", "name": "prod2", "price": "20" }, 
 
    { "uniqueId": "3", "name": "prod3", "price": "30" } 
 
    ]; 
 
    
 
    // this one below doesn't work at all 
 
    // $scope.quantity[1] = 1; 
 
    
 
    $scope.inc = inc; 
 
    
 
    function inc(id) { 
 
     console.log(id); //works fine 
 
     // increase of exact quantity 
 
    } 
 
     
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="mainApp"> 
 
    <div ng-controller="mainCtrl"> 
 
    <table ng-repeat="l1 in list1"> 
 
     <tr> 
 
     <td> 
 
      {{l1.name}} 
 
     </td> 
 
     </tr> 
 
     <tr ng-repeat="l2 in list2"> 
 
     <td>name: {{l2.name}},</td> 
 
     <td>price: {{l2.price}},</td> 
 
     <td>quantity wanted: <input ng-model="quantity[l2.uniqueId]"><button ng-click="inc(l2.uniqueId)" type="button">+</button></td> 
 
     </tr> 
 
    </table> 
 

 

 
    {{quantity}}<!-- sum of all quantities * prices --> 
 

 

 
    </div> 
 
    <div>

Answer 1

ここで私は、各ステップのためにそれと例を行うには見壮大なラインで、この種の問題を解決するmulitple方法があることに留意してください：

は、

• 数量をどこかに保管し、たとえばコントローラ内の製品オブジェクトのように初期化します。

  { "uniqueId": "1", "name": "prod1", "price": "10", quantity : 1 },

• あなたのコントローラの例、彼のidで製品の量を減少させるために増加し、他の関数を作成します。

  function increaseQuantity(id){ // Get your product in the list with a loop // If the product exists // Increase his quantity } function decreaseQuantity(id){ // Get your product in the list with a loop // If the product exists // Decrease his quantity } $scope.increaseQuantity = increaseQuantity; $scope.decreaseQuantity = decreaseQuantity;

• は、例、あなたのボタンの右のメソッド呼び出しをあなたのビュー：

  <td> quantity wanted: {{l2.quantity}} <button ng-click="increaseQuantity(l2.uniqueId)" type="button">+</button> <button ng-click="decreaseQuantity(l2.uniqueId)" type="button">-</button> </td>