Угловой доступ в контроллере к ng-модели во вложенном ng-повторе

Question

У меня проблема, как в теме. Использование $ parent в ng-модели не помогло. То, что я пытаюсь достичь, - это две кнопки с щелчком мыши, чтобы увеличить и уменьшить значение поля количества на единицу и отобразить сводку (сумму каждого количества цены *) в нижней части сайта.

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

• Создать функцию для увеличения и другие, чтобы уменьшить количество продукта по его идентификатору, например, в контроллере:

  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>