如何選擇ng-repeat值的數量

Question

如何使用ng-repeat值的計數器？ 。我已經使用了2個函數加減量，並在控制器中調用了這些函數。問題是當我點擊添加或減去計數器確實增加或減少所有ng重複數據。 我想增加或減少每個產品的數量。。任何人都可以發佈示例代碼或下面的屏幕截圖？

Screenshot

controller.js

.controller('grocery', function($scope, $http) { 

    $http.get('/groceryjson.json') 
     .success(function(response) { 
      $scope.mydata = response; 
      $scope.booking = []; 

      $scope.toggle = function(image) { 
       $scope.selectedImage = image.product_name; 
       $scope.selected_can_rate = image.can_rate; 
       $scope.product_name = image.product_name; 
       /* $scope.register.product_name = image.product_name;*/ 
       $scope.can_path = image.can_path; 
       /*$scope.register.can_path = image.can_path;*/ 

       $scope.booking.push(image) 

       console.log($scope.booking); 

      }; 
     }) 

    $scope.myEvent = function() { 
     window.location = "#/app/booking"; 
    } 
    $scope.canqty = 0; 

    $scope.addqty = function(no){ 
    $scope.canqty++ 
} 

$scope.subqty = function(no){ 
    if($scope.canqty >=1){ 
    $scope.canqty-- 
    } 


}; 
}) 

grocery.html

<ion-view view-title="Grocery"> 
    <ion-floating-button ng-click="myEvent()" has-footer="false" button-color="#2AC9AA" icon="ion-plus" iconColor="#fff"> 
    </ion-floating-button> 
    <ion-content> 
     <div class="row" ng-click="toggle(image)" ng-repeat="image in mydata"> 
      <div class="col col-30 grocery-img"> 
       <img src="{{image.can_path}}" alt="{{image.product_name}}"> 
      </div> 
      <div class="col col-30"> 
       <div class="grcoery-header"> 
        {{image.product_name}} 
       </div> 
       <!-- <div class="grocery-desc"> 
        {{data.desc}} 
       </div> --> 
      </div> 
      <div class="col col-40"> 
       <div class="grocery-buy"> 
        <a class="button buy">Add</a> 
       </div> 
      </div> 
     </div> 
     <div class="row" ng-repeat="data in booking track by $index"> 
      <div class="col col-40"> 
       <img src="{{data.can_path}}" alt="{{data.product_name}}" style="width:100px;"> 
      </div> 
      <div class="col col-60"> 
       <div class="row"> 
       <div class="col col-30"> 
       <button class="add" ng-click="addqty(no)"></button> 
       </div> 
       <div class="col col-30" > 
       <div class="canqty-2">{{canqty}}</div> 
       </div> 
       <div class="col col-30"> 
       <button class="minus" ng-click="subqty(no)"></button> 
       </div> 
       </div> 
      </div> 
     </div> 
     </ion-content> 
    </ion-view> 

Answer 1

這裏的問題是，你試圖改變附加到一個變量您的$範圍主體，不包含在你的對象中。 所以這樣的事情應該工作：

查看：

<div class="row" ng-repeat="data in booking track by $index"> 
 
      <div class="col col-40"> 
 
       <img src="{{data.can_path}}" alt="{{data.product_name}}" style="width:100px;"> 
 
      </div> 
 
      <div class="col col-60"> 
 
       <div class="row"> 
 
       <div class="col col-30"> 
 
       <button class="add" ng-click="addqty(data)"></button> 
 
       </div> 
 
       <div class="col col-30" > 
 
       <div class="canqty-2">{{data.canqty}}</div> 
 
       </div> 
 
       <div class="col col-30"> 
 
       <button class="minus" ng-click="subqty(data)"></button> 
 
       </div> 
 
       </div> 
 
      </div> 
 
     </div>

控制器：

$scope.addqty = function(data){ 
 
     data.canqty++ 
 
    } 
 
    
 
    $scope.subqty = function(data){ 
 
     if($scope.canqty >=1){ 
 
     data.canqty-- 
 
    }